ehscan-react-table 0.0.14 → 0.0.17

package/dist/cells/TableCellDueDate.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { calcDateDiff, formatToDDMMYYYY } from '../tools/dateFunction';
-import styles from '../style/table.module.css';
+import styles from '../elements/table.module.css';
 export const TableCellDueDate = ({ content, id, col, clickRow }) => {
     const DateContent = ({ value }) => {
         const valDate = value;
         return valDate === '-' || !valDate
             ? '-'
-            : _jsx("span", { className: `${styles.dateTag} ${calcDateDiff(valDate)}`, children: formatToDDMMYYYY(valDate) });
+            : _jsx("span", { className: `${styles.dateTag} ${styles[calcDateDiff(valDate)]}`, children: formatToDDMMYYYY(valDate) });
     };
     return (_jsx("div", { onClick: () => clickRow({ id, col, type: 'default' }), children: _jsx(DateContent, { value: content }) }));
 };

package/dist/elements/Pagination.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import PaginationButton from "./PaginationButton";
-import styles from '../style/table.module.css';
+import styles from './table.module.css';
 export const Pagination = ({ totalItems, currentEntries, limit, skip, currentPage, onPageChange }) => {
     const [totalPages, setTotalPages] = useState(0);
     const handlePrevious = () => {

package/dist/elements/PaginationButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import PaginationRipple from './PaginationRipple';
-import styles from '../style/table.module.css';
+import styles from './table.module.css';
 const PaginationButton = ({ index, txt, disabled, isActive, action, display }) => {
     const buttonRef = useRef(null);
     const handleRipple = PaginationRipple();

package/dist/elements/PaginationRipple.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import styles from '../style/table.module.css';
+import styles from './table.module.css';
 const PaginationRipple = () => {
     const handleRipple = useCallback((event, buttonRef) => {
         const button = buttonRef.current;

package/dist/elements/Table.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState, useRef } from "react";
 import TableCellSelectHeadCol from "./TableCellSelectHeadCol";
 import { debounce } from "./Debounce";
-import styles from '../style/table.module.css';
+import styles from './table.module.css';
 export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents, setSelectedIds, searchTermArraySetter, setSearchTermArraySetter, fallback }) => {
     const [wrapperBottom, setWrapperBottom] = useState(undefined);
     const headerRef = useRef(null);
@@ -99,16 +99,16 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
         return (_jsx(_Fragment, { children: _jsxs("div", { className: "sort-col", onClick: () => setSortOrder({ tag, dir: sortOrder.dir === 'desc' ? 'asc' : 'desc' }), children: [sortOrder.tag === tag && _jsx(SortButton, {}), openCol === tag && sortOrder.tag !== tag && _jsx(EmptySort, {})] }) }));
     };
     const HeadColMain = ({ col }) => {
-        const { tag, search, title } = col;
+        const { tag, search, title, width } = col;
         const colTitle = title !== undefined ? title : tag;
-        return (_jsx("th", { children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search ? _jsx(HeadSearchBar, { content: colTitle, tag: tag }) : _jsx("div", { children: colTitle }) })] }) }));
+        const thWidth = width !== undefined ? `${width}px` : "32px";
+        return (_jsx("th", { style: { "--custom-width": thWidth }, children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search ? _jsx(HeadSearchBar, { content: colTitle, tag: tag }) : _jsx("div", { children: colTitle }) })] }) }));
     };
     const HeadCols = () => {
         return (_jsxs(_Fragment, { children: [columns.map((col, i) => {
-                    const { tag, type, width } = col;
-                    const thWidth = width !== undefined ? `${width}px` : "32px";
+                    const { tag, type } = col;
                     if (type === "checkbox") {
-                        return (_jsx("th", { className: styles.thcheckhead, style: { "--custom-width": thWidth }, children: _jsx(TableCellSelectHeadCol, { checkHead: checkHead, checkAll: checkAll }) }, `checkbox-${tag !== null && tag !== void 0 ? tag : i}`));
+                        return (_jsx("th", { className: styles.thcheckhead, style: { "--custom-width": "32px" }, children: _jsx(TableCellSelectHeadCol, { checkHead: checkHead, checkAll: checkAll }) }, `checkbox-${tag !== null && tag !== void 0 ? tag : i}`));
                     }
                     return _jsx(HeadColMain, { col: col }, tag !== null && tag !== void 0 ? tag : i);
                 }), _jsx(EndHeadCol, {})] }));

package/dist/elements/TableChecklistItem.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from 'react';
 import PaginationRipple from './PaginationRipple';
-import styles from '../style/table.module.css';
+import styles from './table.module.css';
 const TableChecklistItem = ({ checked }) => {
     const buttonRef = useRef(null);
     const handleRipple = PaginationRipple();

package/dist/elements/table.module.css

@@ -496,14 +496,14 @@ RIPPLE
 	position: relative;
 	color: var(--ext-table-date-tag-clr, black);
 	padding: 3px 6px;
-	border-radius: 12px;
+	border-radius: 4px;
 	font-size: 0.65rem;
 	font-weight: 600;
 	display: inline-block;
 	text-align: center;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	width: -webkit-fill-available;
+	width: fit-content;
 	z-index: 0;
 }
 .dateTag::before {
@@ -513,7 +513,7 @@ RIPPLE
 	background-color: var(--ext-table-date-tag-bck-clr, darkgrey);
 	opacity: 0.7;
 	/* dim background */
-	border-radius: 12px;
+	border-radius: 4px;
 	z-index: -1;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-table",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",