es-grid-template 0.0.7 → 0.0.13

package/lib/table-grid/styles.scss

@@ -0,0 +1,551 @@
+$prefix: 'ui-rc' !default;
+$antdPrefix: 'ant' !default;
+$primary: #eb4619 !default;
+$rowHoverBg: #FBDED6 !default;
+$rowSelectedBg: #FEF2EF !default;
+//$tableBorderColor: red !default;
+$tableBorderColor: #e0e0e0 !default;
+$border-radius: 6px !default;
+$body-color: #ffffff !default;
+$cell-selected-bg: #E6EFFD !default;
+$cell-index-selected-bg: #0550C5 !default;
+$cell-index-focus-bg: #CEDBEF !default;
+//$rowSelectedHoverBg: 'ui-rc' !default;
+
+.react-hot-toast {
+  font-size: 1rem;
+  color: $body-color;
+  letter-spacing: 0.14px;
+  box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
+  border-radius: $border-radius;
+}
+
+.popup-context-menu {
+  min-width: 200px;
+}
+
+.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  //right: 10px;
+  right: 0px;
+  bottom: 0;
+  z-index: 1;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  //transform: translateY(-50%);
+  &.none {
+    cursor: auto;
+    display: none;
+  }
+}
+
+// -------------- Table -------------
+.#{$prefix}-table-wrapper {
+  &.table-none-column-select {
+    .#{$prefix}-table-cell {
+      &.#{$prefix}-table-selection-column {
+        padding: 0 !important;
+        overflow: hidden !important;
+        border-inline-end: 0 !important;
+        //flex: 0 0 0 !important;
+        //width: 0 !important;
+      }
+    }
+  }
+
+
+  .#{$prefix}-table-tbody {
+    .#{$prefix}-table-row {
+      &.#{$prefix}-table-row-selected {
+        >.#{$prefix}-table-cell {
+          background: #FEF2EF;
+        }
+      }
+      >.#{$prefix}-table-cell {
+        &.#{$prefix}-table-cell-row-hover {
+          background: #FBDED6;
+        }
+      }
+    }
+
+  }
+
+  .#{$prefix}-table-tbody-virtual {
+    .#{$prefix}-table-cell {
+      border-bottom: 1px solid $tableBorderColor;
+    }
+  }
+
+  .#{$prefix}-table-bordered {
+
+    .#{$prefix}-table-tbody-virtual {
+      .#{$prefix}-table-cell {
+        border-inline-end: 1px solid $tableBorderColor;
+      }
+    }
+
+  }
+
+  // ---------------- grid-editable---------------
+
+  &.grid-editable {
+
+    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-cell,
+    .#{$prefix}-table.#{$prefix}-table-small .cell-editable,
+    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>th,
+    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>td {
+      padding: 0;
+    }
+
+    .#{$prefix}-table.#{$prefix}-table-small {
+      .#{$prefix}-table-thead > tr > th,
+      tfoot > tr > th,
+      tfoot > tr > td,
+      tfoot > tr > td.#{$prefix}-table-cell
+      {
+        padding: 5px 8px;
+      }
+    }
+
+    .#{$prefix}-table.#{$prefix}-table-small {
+      .#{$prefix}-table-selection-column{
+        padding: 5px 8px;
+      }
+    }
+
+    .ui-rc_cell-content {
+      user-select: none;
+    }
+
+    .ui-rc_cell-content.selected {
+      background-color: $cell-selected-bg;
+    }
+
+    .ui-rc_cell-content--index {
+      &.focus {
+        background-color: $cell-index-focus-bg;
+        //color: #fff;
+        font-weight: 500;
+      }
+      &.selected {
+        background-color: $cell-index-selected-bg;
+        color: #fff;
+        font-weight: 500;
+      }
+    }
+
+    .#{$prefix}-table-tbody {
+      .#{$prefix}-table-row {
+        &.#{$prefix}-table-row-selected {
+          >.#{$prefix}-table-cell {
+            background: #FEF2EF;
+          }
+        }
+        >.#{$prefix}-table-cell {
+          &.#{$prefix}-table-cell-row-hover {
+            background: #FBDED6;
+          }
+        }
+      }
+
+
+      .#{$prefix}-table-cell{
+
+        &.cell-editing {
+          padding: 0 !important;
+          &:focus-visible {
+            outline: none;
+          }
+          .ant-form-item ,
+          .ant-row.ant-form-item-row,
+          .ant-col.ant-form-item-control,
+          .ant-form-item-control-input,
+          .ant-form-item-control-input-content,
+          .ant-input{
+            height: 100%;
+            &:focus-visible {
+              outline: none;
+            }
+          }
+
+
+          .ant-input, .ant-picker{
+            border-radius: 0;
+          }
+        }
+        &.cell-editable {
+          padding: 0;
+          &:focus-visible {
+            outline: none;
+          }
+        }
+
+        .ui-rc_cell-content,
+        .ui-rc-table-cell-content{
+          height: 100%;
+        }
+        .ui-rc_content {
+          padding: 5px 8px;
+        }
+      }
+    }
+
+  }
+
+  // ---------------- grid-editable---------------
+
+  .#{$prefix}-table {
+
+   &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
+     box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
+   }
+
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+        border-inline-start: 1px solid $tableBorderColor;
+        //border-inline-end: 1px solid $tableBorderColor;
+        border-top: 1px solid $tableBorderColor;
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead {
+              > tr:not(:last-child) {
+                > th {
+                  border-bottom: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+
+
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead,
+            > tbody,
+            > tfoot {
+              > tr {
+                > th,
+                > td {
+                  border-inline-end: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+      }
+
+      >.#{$prefix}-table-title {
+        border: 1px solid $tableBorderColor;
+        border-bottom: 0;
+      }
+    }
+
+
+    .#{$prefix}-select-single .#{$prefix}-select-selector {
+      border-radius: 0;
+    }
+  }
+
+
+  .#{$prefix}-table-thead >tr>th,
+  .#{$prefix}-table-thead >tr>td {
+    background-color: #ffffff;
+  }
+
+  .#{$prefix}-table-thead {
+
+    > tr {
+      > th,
+      > td {
+        border-bottom: 1px solid $tableBorderColor;
+      }
+    }
+    .ui-rc-table-cell {
+      &.ui-rc-table-cell-fix-left-last {
+        .ui-rc-table-cell-content {
+          overflow: visible;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}-table-summary {
+    .#{$prefix}-table-cell {
+      background-color: #fafafa;
+    }
+
+    > tr > td {
+      border-bottom: 1px solid $tableBorderColor;
+    }
+  }
+
+  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
+    border-inline-start: 1px solid $tableBorderColor;
+  }
+
+  .#{$prefix}-table.#{$prefix}-table-bordered {
+    > .#{$prefix}-table-container {
+      > .#{$prefix}-table-header > table > thead > tr,
+      > .#{$prefix}-table-summary > table > tfoot > tr {
+        > .#{$prefix}-table-cell-fix-right-first::before {
+          border-inline-start: 1px solid $tableBorderColor;
+          content: "";
+          position: absolute;
+          inset-block: 0;
+          inset-inline-start: -1px;
+        }
+      }
+    }
+  }
+
+
+  .#{$prefix}-table.#{$prefix}-table-bordered {
+    > .#{$prefix}-table-container {
+      > .#{$prefix}-table-header > table > thead > tr,
+      > .#{$prefix}-table-summary > table > tfoot > tr {
+        > .#{$prefix}-table-cell-fix-right-first::after {
+          border-inline-end: 0;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}-table-ping-left {
+    .#{$prefix}-table-cell-fix-left-first::after,
+    .#{$prefix}-table-cell-fix-left-last::after {
+      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.2);
+    }
+  }
+
+  .#{$prefix}-table-ping-right {
+    .#{$prefix}-table-cell-fix-right-first::after,
+    .#{$prefix}-table-cell-fix-right-last::after {
+      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
+    }
+  }
+
+  .#{$prefix}-spin-nested-loading >div>.#{$prefix}-spin {
+    max-height: 100%;
+  }
+
+
+}
+
+// -------------- Checkbox ----------
+
+.#{$prefix}-checkbox-indeterminate {
+  &:hover {
+    .#{$prefix}-checkbox-inner {
+      border-color: $primary !important; ;
+    }
+  }
+  .#{$prefix}-checkbox-inner {
+    &:after {
+      background-color: $primary;
+    }
+  }
+}
+
+.#{$prefix}-checkbox {
+  &.#{$prefix}-checkbox-checked {
+    &:hover {
+      .#{$prefix}-checkbox-inner {
+        background-color: $primary;
+        border-color: $primary;
+      }
+    }
+    .#{$prefix}-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+}
+
+.#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
+  .#{$prefix}-checkbox-inner {
+    border-color: $primary;
+  }
+}
+
+.#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
+  .#{$prefix}-checkbox-inner {
+    border-color: $primary;
+  }
+  .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
+    .#{$prefix}-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+}
+
+// ------------ Tree ---------------
+
+.#{$prefix}-tree {
+  .#{$prefix}-tree-checkbox-checked {
+    .#{$prefix}-tree-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
+    .#{$prefix}-tree-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+
+  .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
+    .#{$prefix}-tree-checkbox-inner {
+      border-color: $primary;
+    }
+  }
+}
+
+
+// ------------ ant Tree ---------------
+
+.#{$antdPrefix}-tree {
+  .#{$antdPrefix}-tree-checkbox-checked {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+
+  .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      border-color: $primary;
+    }
+  }
+}
+
+
+// ------------ paging ---------------
+
+.#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
+  margin: 0;
+}
+
+
+.#{$prefix}-pagination {
+  &::before {
+    content: "";
+    position: absolute;
+    border-left: 1px solid $tableBorderColor;
+    height: 55px;
+    bottom: 0;
+    left: 0;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    border-left: 1px solid $tableBorderColor;
+    height: 55px;
+    bottom: 0;
+    visibility: visible;
+    right: 0;
+  }
+  border-bottom: 1px solid $tableBorderColor;
+  .#{$prefix}-pagination-item-active {
+    border-color: $primary;
+    &:hover {
+      border-color: $primary;
+      a {
+        color: $primary;
+      }
+    }
+    a {
+      color: $primary;
+    }
+  }
+  .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
+    .#{$prefix}-pagination-item-container {
+      .#{$prefix}-pagination-item-link-icon {
+        color: $primary;
+      }
+    }
+  }
+}
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+  //border-inline-end: 1px solid $tableBorderColor;
+  border-inline-end: 1px solid $tableBorderColor;
+}
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+  //border-inline-end: 1px solid $tableBorderColor;
+  border-inline-end: 0 solid $tableBorderColor;
+}
+
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+  margin-top: 0;
+  margin-bottom: 0;
+  border-inline-end: 1px solid $tableBorderColor;
+}
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+  border-inline-end: 0 solid $tableBorderColor;
+}
+
+
+
+.#{$prefix}-table-wrapper {
+  .#{$prefix}-table {
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table > tbody > tr {
+            > th,
+            > td {
+              > .#{$prefix}-table-expanded-row-fixed::after {
+                // Thêm CSS ở đây
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-title,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-footer,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-cell,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-thead>tr>th,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody>tr>th,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody>tr>td,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot>tr>th,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot>tr>td {
+  padding: 5px 8px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "0.0.7",
+  "version": "0.0.13",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -20,31 +20,42 @@
   "scripts": {
     "compile": "father build",
     "docs:build": "dumi build",
-    "docs:deploy": "gh-pages -d dist",
+    "__docs:deploy": "gh-pages -d dist",
     "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
     "now-build": "npm run docs:build",
     "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
-    "postpublish": "npm run docs:build && npm run docs:deploy",
+    "prepublishOnly": "npm run compile",
+    "postpublish": "npm run docs:build",
+    "__postpublish": "npm run docs:build && npm run docs:deploy",
     "start": "dumi dev",
-    "test": "rc-test"
+    "test": "vitest --watch false",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
+    "@faker-js/faker": "^9.5.0",
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/trigger": "^2.0.0",
     "@rc-component/util": "^1.0.1",
     "@types/react-resizable": "^3.0.8",
     "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^2.0.5",
     "antd": "^5.24.1",
     "antd-style": "^3.7.1",
+    "becoxy-icons": "^1.9.9",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.13",
     "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "rc-master-ui": "^1.1.2",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
     "react-numeric-component": "^1.0.7",
     "react-resizable": "^3.0.5",
     "styled-components": "^6.1.15",
-    "ui-rc": "^0.1.5"
+    "throttle-debounce": "^5.0.2",
+    "uuid": "^11.1.0",
+    "vitest": "^2.0.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",

package/es/ColumnsChoose.d.ts

@@ -1,10 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import React from "react";
-import type { TableColumnsType } from "ui-rc";
-export declare const BoxInputFilterColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export type IColumnsChoose<RecordType> = {
-    columns: any[];
-    setColumns: Dispatch<SetStateAction<TableColumnsType<RecordType>>>;
-    t?: any;
-};
-export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/es/GridTable.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import 'dayjs/locale/es';
-import 'dayjs/locale/vi';
-import './styles.scss';
-import type { GridTableProps } from "./type";
-declare const GridTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
-export default GridTable;