gridjs-spreadsheet 26.5.0 → 26.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "26.5.0",
+  "version": "26.5.2",
   "description": "this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs based on JSON format.",
   "types": "index.d.ts",
   "main": "xspreadsheet.js",

package/readme.md

@@ -403,6 +403,15 @@ v26.5:
 
 - Support add custom buttons in toolbar
 
+v26.5.1: 
+
+- Improve date picker
+
+v26.5.2: 
+
+- Improve filter display
+- Improve print
+
 ## License
 
 MIT

package/xspreadsheet.css

@@ -405,26 +405,102 @@ body {
   background-color: #f4f5f8;
   opacity: 0.9;
   z-index: 12;
+  display: flex;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-track {
+  flex: 1 1 auto;
+  align-self: center;
+  min-width: 0;
+  min-height: 0;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-content {
+  background: #ddd;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button {
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 0 15px;
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #c7ccd6;
+  background: #eef1f6;
+  cursor: default;
+  outline: none;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  transform: translate(-50%, -50%);
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button:hover {
+  background: #e1e6ef;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button:active {
+  background: #d7dde8;
 }
 .x-spreadsheet-scrollbar.horizontal {
   right: 15px;
+  height: 15px;
+  flex-direction: row;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-track {
+  height: 12px;
   overflow-x: scroll;
   overflow-y: hidden;
-  height: 12px;
-  /* 固定高度，避免覆盖表格内容 */
 }
-.x-spreadsheet-scrollbar.horizontal > div {
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-button {
+  width: 15px;
+  height: 15px;
+  border-top-width: 0;
+  border-bottom-width: 0;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-button.decrease::before {
+  border-top: 4px solid transparent;
+  border-right: 5px solid #4f5b6b;
+  border-bottom: 4px solid transparent;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-button.increase::before {
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid #4f5b6b;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-content {
   height: 1px;
-  background: #ddd;
 }
 .x-spreadsheet-scrollbar.vertical {
   bottom: 15px;
+  width: 15px;
+  flex-direction: column;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-track {
+  width: 12px;
   overflow-x: hidden;
   overflow-y: scroll;
 }
-.x-spreadsheet-scrollbar.vertical > div {
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-button {
+  width: 15px;
+  height: 15px;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-button.decrease::before {
+  border-right: 4px solid transparent;
+  border-bottom: 5px solid #4f5b6b;
+  border-left: 4px solid transparent;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-button.increase::before {
+  border-top: 5px solid #4f5b6b;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-content {
   width: 1px;
-  background: #ddd;
 }
 /* @{css-prefix}-overlayer */
 .x-spreadsheet-overlayer {
@@ -679,7 +755,9 @@ body {
   z-index: 100;
   width: 260px;
   pointer-events: auto;
-  overflow: auto;
+  max-height: calc(100vh - 20px);
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 .x-spreadsheet-suggest {
   width: 200px;
@@ -700,12 +778,21 @@ body {
   border-left: 1px solid transparent;
 }
 .x-spreadsheet-filter .x-spreadsheet-body {
-  height: 200px;
+  max-height: 200px;
   overflow-y: auto;
+  overflow-x: auto;
 }
 .x-spreadsheet-filter .x-spreadsheet-body .x-spreadsheet-item {
   height: 20px;
   line-height: 20px;
+  width: max-content;
+  min-width: 100%;
+  white-space: nowrap;
+  overflow: visible;
+}
+.x-spreadsheet-filter .x-spreadsheet-body .labelcnt {
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 .x-spreadsheet-sort-filter .x-spreadsheet-buttons {
   margin: 10px;
@@ -1048,27 +1135,83 @@ body {
   user-select: none;
 }
 .x-spreadsheet-calendar .calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-weight: 700;
   line-height: 30px;
   text-align: center;
   width: 100%;
-  float: left;
   background: #f9fafb;
 }
 .x-spreadsheet-calendar .calendar-header .calendar-header-left {
-  padding-left: 5px;
-  float: left;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
 }
-.x-spreadsheet-calendar .calendar-header .calendar-header-right {
-  float: right;
+.x-spreadsheet-calendar .calendar-header .calendar-title-button {
+  height: 24px;
+  min-width: 52px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 22px;
+  cursor: pointer;
 }
-.x-spreadsheet-calendar .calendar-header .calendar-header-right a {
-  padding: 3px 0;
-  margin-right: 2px;
+.x-spreadsheet-calendar .calendar-header .calendar-title-button:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-prev,
+.x-spreadsheet-calendar .calendar-header .calendar-next {
+  flex: 0 0 28px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
   border-radius: 2px;
+  color: inherit;
+  cursor: pointer;
 }
-.x-spreadsheet-calendar .calendar-header .calendar-header-right a:hover {
-  background: rgba(0, 0, 0, 0.08);
+.x-spreadsheet-calendar .calendar-header .calendar-prev:hover,
+.x-spreadsheet-calendar .calendar-header .calendar-next:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
+}
+.x-spreadsheet-calendar .calendar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 36px;
+  padding: 0 10px;
+  border-top: 1px solid #eef0f3;
+  background: #fff;
+}
+.x-spreadsheet-calendar .calendar-footer-button {
+  height: 26px;
+  min-width: 46px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: #2185D0;
+  font-weight: 700;
+  line-height: 24px;
+  cursor: pointer;
+}
+.x-spreadsheet-calendar .calendar-footer-button:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
 }
 .x-spreadsheet-calendar .calendar-body {
   border-collapse: collapse;
@@ -1083,17 +1226,57 @@ body {
   line-height: 30px;
   padding: 0;
 }
+.x-spreadsheet-calendar .calendar-body td > .cell {
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: pointer;
+}
 .x-spreadsheet-calendar .calendar-body td > .cell:hover {
-  background: #ecf6fd;
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
 }
 .x-spreadsheet-calendar .calendar-body td > .cell.active,
 .x-spreadsheet-calendar .calendar-body td > .cell.active:hover {
   background: #ecf6fd;
   color: #2185D0;
 }
+.x-spreadsheet-calendar .calendar-body td > .cell.today {
+  color: #2185D0;
+}
 .x-spreadsheet-calendar .calendar-body td > .cell.disabled {
   pointer-events: none;
   opacity: 0.5;
+  cursor: default;
+}
+.x-spreadsheet-calendar .calendar-body td > .cell.out-range {
+  color: rgba(0, 0, 0, 0.35);
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td,
+.x-spreadsheet-calendar .calendar-body.year-mode td {
+  width: 33.33333333%;
+  min-width: 64px;
+  line-height: 42px;
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell {
+  margin: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell:hover,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell.active,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell.active,
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell.active:hover,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell.active:hover {
+  border-color: #2185D0;
+  background: #2185D0;
+  color: #fff;
 }
 .x-spreadsheet-datepicker {
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);