ar-design 0.2.57 → 0.2.58

package/dist/assets/css/components/data-display/table/styles.css

@@ -187,17 +187,43 @@
 }
 
 .ar-table > .content > table > tbody > tr.subrow-item {
-  background-color: rgba(var(--warning-rgb), 0.1);
-  border-bottom: solid 1px rgba(var(--warning-rgb), 0.35);
+  /* background-color: rgba(var(--warning-rgb), 0.1); */
+  /* border-bottom: solid 1px rgba(var(--warning-rgb), 0.35); */
 }
 .ar-table > .content > table > tbody > tr.subrow-item:last-child {
-  background-color: rgba(var(--warning-rgb), 0.1);
-  border-bottom: none;
+  /* background-color: rgba(var(--warning-rgb), 0.1); */
+  /* border-bottom: none; */
+}
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell {
+  /* position: relative; */
+}
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .before {
+  position: absolute;
+  top: 0px;
+  content: "";
+  background-color: var(--gray-600);
+  width: 2px;
+  height: 100%;
+  margin-left: -17.5px;
 }
-.ar-table > .content > table > tbody > tr.subrow-item.type-a > td:nth-child(1)::before {
+.ar-table > .content > table > tbody > tr.subrow-item:last-child > td > .table-cell > .before {
+  height: 50%;
+}
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  content: "";
+  background-color: var(--gray-600);
+  width: 15px;
+  height: 2px;
+  margin-left: -17.5px;
+}
+
+/* .ar-table > .content > table > tbody > tr.subrow-item.type-a > td:nth-child(1)::before {
   position: absolute;
   top: 0;
-  left: 0;
+  left: 1rem;
   content: "";
   background-color: rgba(var(--warning-rgb), 0.35);
   width: 2px;
@@ -211,9 +237,9 @@
   background-color: rgba(var(--warning-rgb), 0.35);
   width: 25px;
   height: 2px;
-}
+} */
 
-.ar-table > .content > table > tbody > tr.subrow-item.type-b > td:nth-child(2)::before {
+/* .ar-table > .content > table > tbody > tr.subrow-item.type-b > td:nth-child(2)::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -230,7 +256,7 @@
   background-color: rgba(var(--warning-rgb), 0.35);
   width: 25px;
   height: 2px;
-}
+} */
 
 @import url("./scroll.css");
 @import url("./filter-popup.css");

package/dist/components/data-display/table/IProps.d.ts

@@ -44,7 +44,7 @@ interface IProps<T> extends IChildren {
     };
     selections?: (selectionItems: T[]) => void;
     previousSelections?: T[];
-    searchedParams?: (params: SearchedParam | null, query: string) => void;
+    searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
     pagination?: {
         totalRecords: number;
         perPage: number;

package/dist/components/data-display/table/index.js

@@ -388,7 +388,10 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         if (c.config?.textWrap)
             _className.push(`text-${c.config.textWrap}`);
         return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width } : {}, "data-sticky-position": c.config?.sticky },
-            React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" }, React.isValidElement(render) ? render : String(render))));
+            React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" },
+                cIndex === 0 && React.createElement("div", { className: "before" }),
+                React.isValidElement(render) ? render : String(render),
+                cIndex === 0 && React.createElement("div", { className: "after" }))));
     };
     const SubitemList = ({ items, columns, index, depth }) => {
         return items.map((subitem, subindex) => {
@@ -407,7 +410,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                         [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
                                     }));
                                 } })))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
-                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.5))),
+                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.75))),
                 showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { key: `subitem-${index}-${subindex}-${Math.random()}`, items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
         });
     };
@@ -443,7 +446,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                     query.delete(column.key);
                 }
             });
-            searchedParams(_searchedParams, query.toString());
+            searchedParams(_searchedParams, query.toString(), filterPopupOption?.option?.value);
         }
     }, [_searchedParams]);
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",