@jiaozhiye/qm-design-react 1.12.2 → 1.12.4

package/lib/scrollbar/src/scrollbar.d.ts

@@ -4,6 +4,7 @@ type IEvent = {
     scrollTop: number;
     scrollLeft: number;
 };
+type IDirection = 'top' | 'bottom' | 'left' | 'right';
 type IProps = {
     className?: string;
     style?: CSSProperties;
@@ -17,9 +18,11 @@ type IProps = {
     native?: boolean;
     children?: React.ReactNode;
     onScroll?: (event: IEvent) => void;
+    onReachedEnd?: (direction: IDirection, option: IEvent) => void;
 };
 export type ScrollbarRef = {
     container: HTMLDivElement;
+    scrollElement: HTMLDivElement;
     scrollTop: number;
     scrollLeft: number;
     SET_SCROLL_TOP: (value: number, animate?: boolean) => void;

package/lib/style/index.css

@@ -27452,7 +27452,9 @@ body {
  * @Last Modified time: 2021-07-31 22:38:07
  */
 .qm-empty .ant-empty-image {
-  height: auto;
+  display: grid;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 .qm-empty--lg .ant-empty-image > svg {
   width: 80px;
@@ -31328,6 +31330,12 @@ body {
   font-feature-settings: 'tnum';
   width: 100%;
 }
+.qm-pivot-grid__layout.col-resize {
+  cursor: col-resize;
+}
+.qm-pivot-grid__layout.col-resize .qm-scrollbar__view {
+  pointer-events: none;
+}
 .qm-pivot-grid__layout .qm-scrollbar__wrap {
   display: flex;
   flex-wrap: nowrap;
@@ -31439,6 +31447,11 @@ body {
   color: rgba(0, 0, 0, 0.45);
   visibility: hidden;
 }
+.qm-pivot-grid__layout .header .table-cell .action .drag-icon,
+.qm-pivot-grid__layout .body .table-cell .action .drag-icon,
+.qm-pivot-grid__layout .footer .table-cell .action .drag-icon {
+  cursor: grab;
+}
 .qm-pivot-grid__layout .header .table-cell .action .expand-icon:hover,
 .qm-pivot-grid__layout .body .table-cell .action .expand-icon:hover,
 .qm-pivot-grid__layout .footer .table-cell .action .expand-icon:hover {
@@ -31548,7 +31561,6 @@ body {
   width: 2px;
   height: 100%;
   background-color: #1890ff;
-  cursor: col-resize;
   z-index: 2;
 }
 .qm-pivot-grid__layout .fixed-line {
@@ -31557,7 +31569,7 @@ body {
   top: 0;
   width: 0;
   height: 100%;
-  border-left: 1px solid #91d5ff;
+  border-left: 1px solid #d9d9d9;
   z-index: 2;
   pointer-events: none;
 }
@@ -31572,9 +31584,50 @@ body {
   transition: box-shadow 0.3s;
   pointer-events: none;
 }
-.qm-pivot-grid__layout .fixed-line.active::after {
+.qm-pivot-grid__layout .fixed-line.leave::after {
   box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
 }
+.qm-pivot-grid__layout .fixed-line.active {
+  border-left: 1px solid #1890ff;
+  border-right: 1px solid #1890ff;
+}
+.qm-pivot-grid__layout .fixed-bar {
+  position: absolute;
+  top: 0;
+  left: -1px;
+  width: 6px;
+  height: 100%;
+  margin-left: -2px;
+  background-image: none;
+  background-repeat: no-repeat;
+  z-index: 1;
+  cursor: col-resize;
+}
+.qm-pivot-grid__layout .fixed-bar:hover,
+.qm-pivot-grid__layout .fixed-bar.active {
+  background-image: linear-gradient(to right, transparent 2px, #d9d9d9 2px 4px, transparent 4px 6px);
+  z-index: 2;
+}
+.qm-pivot-grid__layout .fixed-bar:hover .thumb,
+.qm-pivot-grid__layout .fixed-bar.active .thumb {
+  opacity: 1;
+}
+.qm-pivot-grid__layout .fixed-bar .thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 32px;
+  border-radius: 6px;
+  background-color: #1890ff;
+  opacity: 0;
+  pointer-events: none;
+}
+.qm-pivot-grid__layout .content-empty {
+  position: absolute;
+  width: 100%;
+  margin: 20px 0;
+}
 .qm-pivot-grid__layout .left-panel {
   position: sticky;
   left: 0;
@@ -31601,6 +31654,25 @@ body {
 .qm-pivot-grid__layout .left-panel .row-item.last .table-cell:first-child {
   border-bottom-left-radius: 8px;
 }
+.qm-pivot-grid__layout .left-panel .row-item.is-leaf .selection-column {
+  border-top-color: transparent;
+}
+.qm-pivot-grid__layout .left-panel .row-item.is-leaf .cell--indent {
+  display: flex;
+  background-color: #fff;
+}
+.qm-pivot-grid__layout .left-panel .row-item.is-leaf .cell--indent .line {
+  flex: 1 0;
+  position: relative;
+}
+.qm-pivot-grid__layout .left-panel .row-item.is-leaf .cell--indent .line::before {
+  content: '';
+  position: absolute;
+  left: 10px;
+  height: 100%;
+  margin-top: -100%;
+  border-left: 1px dashed rgba(0, 0, 0, 0.175);
+}
 .qm-pivot-grid__layout .left-panel .no-group .row-item:last-child {
   box-shadow: -5px 0px 0 0px #f5f5f5;
 }
@@ -31637,6 +31709,7 @@ body {
   position: absolute;
   border: 1px solid #e8e8e8;
   background-color: #fff;
+  overflow: hidden;
 }
 .qm-pivot-grid__layout .container .group-label .label-row {
   display: flex;
@@ -31662,6 +31735,7 @@ body {
 }
 .qm-pivot-grid__layout .container .group-label .label-cell .title {
   flex-shrink: 0;
+  margin-left: 8px;
   margin-right: 20px;
   font-weight: 600;
 }
@@ -31682,18 +31756,25 @@ body {
   height: inherit;
 }
 .qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell,
-.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell {
+.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell,
+.qm-pivot-grid__layout .container .row-item .table-row.row--hover .cell--indent,
+.qm-pivot-grid__layout .container .row-item .table-row.row--selection .cell--indent {
   background-color: #f5f5f5;
 }
 .middle.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell:has(.checkbox) .order,
-.middle.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell:has(.checkbox) .order {
+.middle.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell:has(.checkbox) .order,
+.middle.qm-pivot-grid__layout .container .row-item .table-row.row--hover .cell--indent:has(.checkbox) .order,
+.middle.qm-pivot-grid__layout .container .row-item .table-row.row--selection .cell--indent:has(.checkbox) .order {
   display: none;
 }
 .middle.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell:has(.checkbox) .checkbox,
-.middle.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell:has(.checkbox) .checkbox {
+.middle.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell:has(.checkbox) .checkbox,
+.middle.qm-pivot-grid__layout .container .row-item .table-row.row--hover .cell--indent:has(.checkbox) .checkbox,
+.middle.qm-pivot-grid__layout .container .row-item .table-row.row--selection .cell--indent:has(.checkbox) .checkbox {
   display: inline-flex;
 }
-.qm-pivot-grid__layout .container .row-item .table-row.row--highlight .table-cell {
+.qm-pivot-grid__layout .container .row-item .table-row.row--highlight .table-cell,
+.qm-pivot-grid__layout .container .row-item .table-row.row--highlight .cell--indent {
   background-color: #e6f7ff;
 }
 .qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell .drag-icon,
@@ -31702,14 +31783,22 @@ body {
 }
 .qm-pivot-grid__layout .container .row-item .table-row .cell--expand {
   display: inline-flex;
-  padding: 4px;
-  font-size: 13px;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  padding: 3px;
   color: rgba(0, 0, 0, 0.45);
+  border-radius: 4px;
+  background-color: #fff;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
   cursor: pointer;
-  transform: scaleX(1.15);
+}
+.qm-pivot-grid__layout .container .row-item .table-row .cell--expand .icon {
   transition: transform 0.3s ease;
 }
-.qm-pivot-grid__layout .container .row-item .table-row .cell--expand.fold {
+.qm-pivot-grid__layout .container .row-item .table-row .cell--expand.fold .icon {
   transform: rotate(-90deg);
 }
 .qm-pivot-grid__layout .container .row-item .table-row .cell--expand.disabled {
@@ -31717,15 +31806,18 @@ body {
   cursor: not-allowed;
 }
 .qm-pivot-grid__layout.small .label-row,
-.qm-pivot-grid__layout.small .table-cell {
+.qm-pivot-grid__layout.small .table-cell,
+.qm-pivot-grid__layout.small .cell--indent {
   height: 26px;
 }
 .qm-pivot-grid__layout.middle .label-row,
-.qm-pivot-grid__layout.middle .table-cell {
+.qm-pivot-grid__layout.middle .table-cell,
+.qm-pivot-grid__layout.middle .cell--indent {
   height: 34px;
 }
 .qm-pivot-grid__layout.large .label-row,
-.qm-pivot-grid__layout.large .table-cell {
+.qm-pivot-grid__layout.large .table-cell,
+.qm-pivot-grid__layout.large .cell--indent {
   height: 42px;
 }
 /*