@fileverse-dev/fortune-react 1.1.74 → 1.1.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/es/components/ContextMenu/index.js +74 -0
  2. package/es/components/SheetTab/SheetItem.js +1 -7
  3. package/es/components/SheetTab/index.css +13 -21
  4. package/es/components/SheetTab/index.js +30 -33
  5. package/es/components/Workbook/index.js +1 -9
  6. package/es/components/ZoomControl/index.css +5 -2
  7. package/es/components/ZoomControl/index.js +15 -17
  8. package/lib/components/ContextMenu/index.js +74 -0
  9. package/lib/components/SheetTab/SheetItem.js +1 -7
  10. package/lib/components/SheetTab/index.css +13 -21
  11. package/lib/components/SheetTab/index.js +29 -32
  12. package/lib/components/Workbook/index.js +1 -9
  13. package/lib/components/ZoomControl/index.css +5 -2
  14. package/lib/components/ZoomControl/index.js +15 -17
  15. package/package.json +2 -2
package/es/components/ContextMenu/index.js CHANGED
@@ -399,6 +399,43 @@ var ContextMenu = function ContextMenu() {
399
399
  }), /*#__PURE__*/React.createElement("div", null, "Insert column to the left")));
400
400
  });
401
401
  }
402
+ if (name === "insert-column-right") {
403
+ return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left"].map(function (dir) {
404
+ return /*#__PURE__*/React.createElement(Menu, {
405
+ key: "add-col-".concat(dir),
406
+ onClick: function onClick() {
407
+ var _a, _b, _c;
408
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.column) === null || _c === void 0 ? void 0 : _c[0];
409
+ if (position == null) return;
410
+ var count = 1;
411
+ if (count < 1) return;
412
+ var direction = "rightbottom";
413
+ var insertRowColOp = {
414
+ type: "column",
415
+ index: position,
416
+ count: count,
417
+ direction: direction,
418
+ id: context.currentSheetId
419
+ };
420
+ setContext(function (draftCtx) {
421
+ try {
422
+ insertRowCol(draftCtx, insertRowColOp);
423
+ draftCtx.contextMenu = {};
424
+ } catch (err) {
425
+ if (err.message === "maxExceeded") showAlert(rightclick.columnOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnColumnReadOnly, "ok");
426
+ draftCtx.contextMenu = {};
427
+ }
428
+ }, {
429
+ insertRowColOp: insertRowColOp
430
+ });
431
+ }
432
+ }, /*#__PURE__*/React.createElement("div", {
433
+ className: "context-item"
434
+ }, /*#__PURE__*/React.createElement(LucideIcon, {
435
+ name: "Plus"
436
+ }), /*#__PURE__*/React.createElement("div", null, "Insert column to the right")));
437
+ });
438
+ }
402
439
  if (name === "insert-row") {
403
440
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
404
441
  return /*#__PURE__*/React.createElement(Menu, {
@@ -436,6 +473,43 @@ var ContextMenu = function ContextMenu() {
436
473
  }), /*#__PURE__*/React.createElement("div", null, "Insert row below")));
437
474
  });
438
475
  }
476
+ if (name === "insert-row-above") {
477
+ return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
478
+ return /*#__PURE__*/React.createElement(Menu, {
479
+ key: "add-row-".concat(dir),
480
+ onClick: function onClick() {
481
+ var _a, _b, _c;
482
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.row) === null || _c === void 0 ? void 0 : _c[0];
483
+ if (position == null) return;
484
+ var count = 1;
485
+ if (count < 1) return;
486
+ var direction = "lefttop";
487
+ var insertRowColOp = {
488
+ type: "row",
489
+ index: position,
490
+ count: count,
491
+ direction: direction,
492
+ id: context.currentSheetId
493
+ };
494
+ setContext(function (draftCtx) {
495
+ try {
496
+ insertRowCol(draftCtx, insertRowColOp);
497
+ draftCtx.contextMenu = {};
498
+ } catch (err) {
499
+ if (err.message === "maxExceeded") showAlert(rightclick.rowOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnRowReadOnly, "ok");
500
+ draftCtx.contextMenu = {};
501
+ }
502
+ }, {
503
+ insertRowColOp: insertRowColOp
504
+ });
505
+ }
506
+ }, /*#__PURE__*/React.createElement("div", {
507
+ className: "context-item"
508
+ }, /*#__PURE__*/React.createElement(LucideIcon, {
509
+ name: "Plus"
510
+ }), /*#__PURE__*/React.createElement("div", null, "Insert row above")));
511
+ });
512
+ }
439
513
  if (name === "delete-column") {
440
514
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/React.createElement(Menu, {
441
515
  key: "delete-col",
package/es/components/SheetTab/SheetItem.js CHANGED
@@ -190,12 +190,6 @@ var SheetItem = function SheetItem(_a) {
190
190
  } : {}
191
191
  }, sheet.name), /*#__PURE__*/React.createElement("span", {
192
192
  className: "luckysheet-sheets-item-function",
193
- onMouseEnter: function onMouseEnter() {
194
- return setSvgColor("#5c5c5c");
195
- },
196
- onMouseLeave: function onMouseLeave() {
197
- return setSvgColor("#c3c3c3");
198
- },
199
193
  onClick: function onClick(e) {
200
194
  if (isDropPlaceholder || context.allowEdit === false) return;
201
195
  var rect = refs.workbookContainer.current.getBoundingClientRect();
@@ -218,7 +212,7 @@ var SheetItem = function SheetItem(_a) {
218
212
  name: "downArrow",
219
213
  width: 12,
220
214
  style: {
221
- fill: svgColor
215
+ fill: 'var(--color-icon-default)'
222
216
  }
223
217
  })), !!sheet.color && (/*#__PURE__*/React.createElement("div", {
224
218
  className: "luckysheet-sheets-item-color",
package/es/components/SheetTab/index.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .luckysheet-sheet-area {
2
2
  width: 100%;
3
3
  box-sizing: border-box;
4
- background-color: #fafafc;
4
+ /* background-color: #fafafc; */
5
5
  color: #444;
6
- height: 31px;
6
+ height: 36px;
7
7
  padding: 0 30px 0 44px;
8
8
  margin: 0;
9
9
  -webkit-touch-callout: none;
@@ -19,6 +19,7 @@
19
19
  flex: 3;
20
20
  display: flex;
21
21
  align-items: center;
22
+ gap: 8px;
22
23
  }
23
24
 
24
25
  #luckysheet-bottom-pager {
@@ -92,21 +93,19 @@
92
93
 
93
94
  .luckysheet-sheet-area div.luckysheet-sheets-item {
94
95
  padding: 2px 6px;
95
- height: 29px;
96
+ height: 34px;
96
97
  line-height: 29px;
97
98
  background-color: #fafafc;
98
- color: #676464;
99
+ color: var(--color-text-default);
99
100
  min-width: 30px;
100
101
  top: 0px;
101
102
  position: relative;
102
103
  margin-right: -1px;
103
104
  cursor: pointer;
104
105
  transition: all 0.1s;
105
- font-size: 13px;
106
+ font-size: 14px;
106
107
  padding: 2px 19px 0px 5px;
107
108
  box-sizing: border-box;
108
- border-left: 1px solid #e0e0e0;
109
- border-right: 1px solid #e0e0e0;
110
109
  vertical-align: middle;
111
110
  }
112
111
 
@@ -115,9 +114,8 @@
115
114
  }
116
115
 
117
116
  .luckysheet-sheet-area div.luckysheet-sheets-item:hover {
118
- background-color: #efefef;
117
+ background-color: hsl(var(--color-button-secondary-hover));
119
118
  /* border-color: #a5a5a5; */
120
- color: #490500;
121
119
  }
122
120
 
123
121
  .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-menu {
@@ -155,7 +153,7 @@
155
153
  .luckysheet-sheet-area
156
154
  div.luckysheet-sheets-item
157
155
  .luckysheet-sheets-item-name[contenteditable="true"] {
158
- border: 1px solid #d9d9d9;
156
+ border-bottom: 1px solid #d9d9d9;
159
157
  display: inline-block;
160
158
  height: 18px;
161
159
  line-height: 18px;
@@ -180,30 +178,24 @@
180
178
 
181
179
  .luckysheet-sheet-area div.luckysheet-sheets-item-active {
182
180
  /* padding: 2px 8px; */
183
- height: 29px;
181
+ height: 34px;
184
182
  line-height: 29px;
185
- background-color: #efefef;
186
183
  /* border-color: #aaa; */
187
- border-top-color: #fff;
188
- color: #222;
184
+ border-bottom: 5px solid #EFC703;
185
+ color: hsl(var(--color-text-default));
189
186
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
190
187
  /* top: -2px; */
191
188
  /* border-bottom: none; */
192
189
  /* padding-right: 20px; */
193
190
  }
194
191
 
195
- .luckysheet-sheet-area div.luckysheet-sheets-item-active:hover {
196
- background-color: #ececec;
197
- /* border-color: #aaa; */
198
- color: #222;
199
- }
200
-
201
192
  .fortune-sheettab-button {
202
193
  display: flex;
203
194
  align-items: center;
204
195
  justify-content: center;
205
196
  height: 29px;
206
197
  width: 29px;
198
+ background-color: var(--color-bg-secondary);
207
199
  }
208
200
 
209
201
  .fortune-sheettab-button:hover {
@@ -212,7 +204,7 @@
212
204
  justify-content: center;
213
205
  height: 29px;
214
206
  width: 29px;
215
- background-color: #efefef;
207
+ background-color: hsl(var(--color-button-secondary-hover));
216
208
  }
217
209
 
218
210
  .luckysheet-noselected-text {
package/es/components/SheetTab/index.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import _ from "lodash";
2
2
  import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
3
- import { Popover, PopoverTrigger, PopoverContent, LucideIcon, Button } from "@fileverse/ui";
3
+ import { Popover, PopoverTrigger, PopoverContent, LucideIcon, Button, IconButton } from "@fileverse/ui";
4
4
  import { useMediaQuery } from "usehooks-ts";
5
5
  import { updateCell, addSheet, calcSelectionInfo } from "@fileverse-dev/fortune-core";
6
6
  import WorkbookContext from "../../context";
7
- import SVGIcon from "../SVGIcon";
8
7
  import "./index.css";
9
8
  import SheetItem from "./SheetItem";
10
9
  import ZoomControl from "../ZoomControl";
@@ -159,21 +158,21 @@ var SheetTab = function SheetTab() {
159
158
  },
160
159
  onClick: handleCloseDisclaimer
161
160
  }, "Close"))))), /*#__PURE__*/React.createElement("div", {
162
- className: "luckysheet-sheet-area luckysheet-noselected-text",
161
+ className: "luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
163
162
  onContextMenu: function onContextMenu(e) {
164
163
  return e.preventDefault();
165
164
  },
166
165
  id: "luckysheet-sheet-area"
167
166
  }, /*#__PURE__*/React.createElement("div", {
168
167
  id: "luckysheet-sheet-content"
169
- }, context.allowEdit && (/*#__PURE__*/React.createElement("div", {
170
- className: "fortune-sheettab-button",
171
- onClick: onAddSheetClick
172
- }, /*#__PURE__*/React.createElement(SVGIcon, {
173
- name: "plus",
174
- width: 16,
175
- height: 16
176
- }))), context.allowEdit && (/*#__PURE__*/React.createElement("div", {
168
+ }, context.allowEdit && (/*#__PURE__*/React.createElement(IconButton, {
169
+ className: "fortune-sheettab-button border-none shadow-none",
170
+ onClick: onAddSheetClick,
171
+ elevation: 1,
172
+ icon: "Plus",
173
+ size: "md",
174
+ variant: "secondary"
175
+ })), context.allowEdit && (/*#__PURE__*/React.createElement("div", {
177
176
  className: "sheet-list-container"
178
177
  }, /*#__PURE__*/React.createElement("div", {
179
178
  id: "all-sheets",
@@ -186,10 +185,12 @@ var SheetTab = function SheetTab() {
186
185
  ctx.sheetTabContextMenu = {};
187
186
  });
188
187
  }
189
- }, /*#__PURE__*/React.createElement(SVGIcon, {
190
- name: "all-sheets",
191
- width: 16,
192
- height: 16
188
+ }, /*#__PURE__*/React.createElement(IconButton, {
189
+ className: "fortune-sheettab-button border-none shadow-none",
190
+ elevation: 1,
191
+ icon: "Menu",
192
+ size: "md",
193
+ variant: "secondary"
193
194
  })))), /*#__PURE__*/React.createElement("div", {
194
195
  id: "luckysheet-sheets-m",
195
196
  className: "luckysheet-sheets-m lucky-button-custom"
@@ -213,31 +214,27 @@ var SheetTab = function SheetTab() {
213
214
  });
214
215
  })), isShowBoundary && isShowScrollBtn && (/*#__PURE__*/React.createElement("div", {
215
216
  className: "boundary boundary-right"
216
- }))), isShowScrollBtn && (/*#__PURE__*/React.createElement("div", {
217
+ }))), isShowScrollBtn && (/*#__PURE__*/React.createElement(IconButton, {
217
218
  id: "fortune-sheettab-leftscroll",
218
- className: "fortune-sheettab-scroll",
219
- ref: leftScrollRef,
219
+ className: "fortune-sheettab-button border-none shadow-none",
220
220
  onClick: function onClick() {
221
221
  scrollBy(-scrollDelta);
222
222
  },
223
- tabIndex: 0
224
- }, /*#__PURE__*/React.createElement(SVGIcon, {
225
- name: "arrow-doubleleft",
226
- width: 12,
227
- height: 12
228
- }))), isShowScrollBtn && (/*#__PURE__*/React.createElement("div", {
229
- id: "fortune-sheettab-rightscroll",
230
- className: "fortune-sheettab-scroll",
231
- ref: rightScrollRef,
223
+ elevation: 1,
224
+ icon: "ChevronLeft",
225
+ size: "md",
226
+ variant: "secondary"
227
+ })), isShowScrollBtn && (/*#__PURE__*/React.createElement(IconButton, {
228
+ id: "fortune-sheettab-leftscroll",
229
+ className: "fortune-sheettab-button border-none shadow-none",
232
230
  onClick: function onClick() {
233
231
  scrollBy(scrollDelta);
234
232
  },
235
- tabIndex: 0
236
- }, /*#__PURE__*/React.createElement(SVGIcon, {
237
- name: "arrow-doubleright",
238
- width: 12,
239
- height: 12
240
- })))), /*#__PURE__*/React.createElement("div", {
233
+ elevation: 1,
234
+ icon: "ChevronRight",
235
+ size: "md",
236
+ variant: "secondary"
237
+ }))), /*#__PURE__*/React.createElement("div", {
241
238
  className: "fortune-sheet-area-right"
242
239
  }, statsFilter.length === 6 && (/*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(PopoverTrigger, {
243
240
  className: "p-0 m-0 mr-2"
package/es/components/Workbook/index.js CHANGED
@@ -723,15 +723,7 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
723
723
  e.stopPropagation();
724
724
  },
725
725
  className: "fortune-popover-backdrop"
726
- })), /*#__PURE__*/React.createElement("div", {
727
- className: "fortune-stat-area"
728
- }, /*#__PURE__*/React.createElement("div", {
729
- className: "luckysheet-sheet-selection-calInfo"
730
- }, !!calInfo.count && (/*#__PURE__*/React.createElement("div", {
731
- style: {
732
- width: "60px"
733
- }
734
- }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React.createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React.createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React.createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React.createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/React.createElement(DunePreview, {
726
+ })), context.showDunePreview && (/*#__PURE__*/React.createElement(DunePreview, {
735
727
  url: context.showDunePreview.url,
736
728
  position: context.showDunePreview.position,
737
729
  onKeepAsLink: function onKeepAsLink() {
package/es/components/ZoomControl/index.css CHANGED
@@ -12,11 +12,14 @@
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
  width: 24px;
15
- height: 24px;
15
+ height: 28px;
16
+ border-radius: 3px;
17
+ color: var(--color-text-default);
18
+ font-size: 14px;
16
19
  }
17
20
 
18
21
  .fortune-zoom-button:hover {
19
- background: #efefef;
22
+ background-color: hsl(var(--color-button-secondary-hover));
20
23
  }
21
24
 
22
25
  .fortune-zoom-ratio {
package/es/components/ZoomControl/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useCallback, useContext, useRef, useState, useEffect } from "react";
2
2
  import { MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, getSheetIndex } from "@fileverse-dev/fortune-core";
3
+ import { IconButton } from "@fileverse/ui";
3
4
  import WorkbookContext from "../../context";
4
- import SVGIcon from "../SVGIcon";
5
5
  import { useOutsideClick } from "../../hooks/useOutsideClick";
6
6
  import "./index.css";
7
7
  var presets = [{
@@ -76,18 +76,17 @@ var ZoomControl = function ZoomControl() {
76
76
  }, [context.zoomRatio]);
77
77
  return /*#__PURE__*/React.createElement("div", {
78
78
  className: "fortune-zoom-container"
79
- }, /*#__PURE__*/React.createElement("div", {
80
- className: "fortune-zoom-button",
79
+ }, /*#__PURE__*/React.createElement(IconButton, {
80
+ className: "fortune-sheettab-button border-none shadow-none",
81
81
  onClick: function onClick(e) {
82
82
  zoomTo(context.zoomRatio - 0.1);
83
83
  e.stopPropagation();
84
84
  },
85
- tabIndex: 0
86
- }, /*#__PURE__*/React.createElement(SVGIcon, {
87
- name: "minus",
88
- width: 16,
89
- height: 16
90
- })), /*#__PURE__*/React.createElement("div", {
85
+ elevation: 1,
86
+ icon: "Minus",
87
+ size: "md",
88
+ variant: "secondary"
89
+ }), /*#__PURE__*/React.createElement("div", {
91
90
  className: "fortune-zoom-ratio"
92
91
  }, /*#__PURE__*/React.createElement("div", {
93
92
  className: "fortune-zoom-ratio-current fortune-zoom-button",
@@ -110,17 +109,16 @@ var ZoomControl = function ZoomControl() {
110
109
  }, /*#__PURE__*/React.createElement("div", {
111
110
  className: "fortune-zoom-ratio-text"
112
111
  }, v.text));
113
- })))), /*#__PURE__*/React.createElement("div", {
114
- className: "fortune-zoom-button",
112
+ })))), /*#__PURE__*/React.createElement(IconButton, {
113
+ className: "fortune-sheettab-button border-none shadow-none",
115
114
  onClick: function onClick(e) {
116
115
  zoomTo(context.zoomRatio + 0.1);
117
116
  e.stopPropagation();
118
117
  },
119
- tabIndex: 0
120
- }, /*#__PURE__*/React.createElement(SVGIcon, {
121
- name: "plus",
122
- width: 16,
123
- height: 16
124
- })));
118
+ elevation: 1,
119
+ icon: "Plus",
120
+ size: "md",
121
+ variant: "secondary"
122
+ }));
125
123
  };
126
124
  export default ZoomControl;
package/lib/components/ContextMenu/index.js CHANGED
@@ -408,6 +408,43 @@ var ContextMenu = function ContextMenu() {
408
408
  }), /*#__PURE__*/_react.default.createElement("div", null, "Insert column to the left")));
409
409
  });
410
410
  }
411
+ if (name === "insert-column-right") {
412
+ return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left"].map(function (dir) {
413
+ return /*#__PURE__*/_react.default.createElement(_Menu.default, {
414
+ key: "add-col-".concat(dir),
415
+ onClick: function onClick() {
416
+ var _a, _b, _c;
417
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.column) === null || _c === void 0 ? void 0 : _c[0];
418
+ if (position == null) return;
419
+ var count = 1;
420
+ if (count < 1) return;
421
+ var direction = "rightbottom";
422
+ var insertRowColOp = {
423
+ type: "column",
424
+ index: position,
425
+ count: count,
426
+ direction: direction,
427
+ id: context.currentSheetId
428
+ };
429
+ setContext(function (draftCtx) {
430
+ try {
431
+ (0, _fortuneCore.insertRowCol)(draftCtx, insertRowColOp);
432
+ draftCtx.contextMenu = {};
433
+ } catch (err) {
434
+ if (err.message === "maxExceeded") showAlert(rightclick.columnOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnColumnReadOnly, "ok");
435
+ draftCtx.contextMenu = {};
436
+ }
437
+ }, {
438
+ insertRowColOp: insertRowColOp
439
+ });
440
+ }
441
+ }, /*#__PURE__*/_react.default.createElement("div", {
442
+ className: "context-item"
443
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
444
+ name: "Plus"
445
+ }), /*#__PURE__*/_react.default.createElement("div", null, "Insert column to the right")));
446
+ });
447
+ }
411
448
  if (name === "insert-row") {
412
449
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
413
450
  return /*#__PURE__*/_react.default.createElement(_Menu.default, {
@@ -445,6 +482,43 @@ var ContextMenu = function ContextMenu() {
445
482
  }), /*#__PURE__*/_react.default.createElement("div", null, "Insert row below")));
446
483
  });
447
484
  }
485
+ if (name === "insert-row-above") {
486
+ return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
487
+ return /*#__PURE__*/_react.default.createElement(_Menu.default, {
488
+ key: "add-row-".concat(dir),
489
+ onClick: function onClick() {
490
+ var _a, _b, _c;
491
+ var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.row) === null || _c === void 0 ? void 0 : _c[0];
492
+ if (position == null) return;
493
+ var count = 1;
494
+ if (count < 1) return;
495
+ var direction = "lefttop";
496
+ var insertRowColOp = {
497
+ type: "row",
498
+ index: position,
499
+ count: count,
500
+ direction: direction,
501
+ id: context.currentSheetId
502
+ };
503
+ setContext(function (draftCtx) {
504
+ try {
505
+ (0, _fortuneCore.insertRowCol)(draftCtx, insertRowColOp);
506
+ draftCtx.contextMenu = {};
507
+ } catch (err) {
508
+ if (err.message === "maxExceeded") showAlert(rightclick.rowOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnRowReadOnly, "ok");
509
+ draftCtx.contextMenu = {};
510
+ }
511
+ }, {
512
+ insertRowColOp: insertRowColOp
513
+ });
514
+ }
515
+ }, /*#__PURE__*/_react.default.createElement("div", {
516
+ className: "context-item"
517
+ }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
518
+ name: "Plus"
519
+ }), /*#__PURE__*/_react.default.createElement("div", null, "Insert row above")));
520
+ });
521
+ }
448
522
  if (name === "delete-column") {
449
523
  return (selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/_react.default.createElement(_Menu.default, {
450
524
  key: "delete-col",
package/lib/components/SheetTab/SheetItem.js CHANGED
@@ -199,12 +199,6 @@ var SheetItem = function SheetItem(_a) {
199
199
  } : {}
200
200
  }, sheet.name), /*#__PURE__*/_react.default.createElement("span", {
201
201
  className: "luckysheet-sheets-item-function",
202
- onMouseEnter: function onMouseEnter() {
203
- return setSvgColor("#5c5c5c");
204
- },
205
- onMouseLeave: function onMouseLeave() {
206
- return setSvgColor("#c3c3c3");
207
- },
208
202
  onClick: function onClick(e) {
209
203
  if (isDropPlaceholder || context.allowEdit === false) return;
210
204
  var rect = refs.workbookContainer.current.getBoundingClientRect();
@@ -227,7 +221,7 @@ var SheetItem = function SheetItem(_a) {
227
221
  name: "downArrow",
228
222
  width: 12,
229
223
  style: {
230
- fill: svgColor
224
+ fill: 'var(--color-icon-default)'
231
225
  }
232
226
  })), !!sheet.color && (/*#__PURE__*/_react.default.createElement("div", {
233
227
  className: "luckysheet-sheets-item-color",
package/lib/components/SheetTab/index.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .luckysheet-sheet-area {
2
2
  width: 100%;
3
3
  box-sizing: border-box;
4
- background-color: #fafafc;
4
+ /* background-color: #fafafc; */
5
5
  color: #444;
6
- height: 31px;
6
+ height: 36px;
7
7
  padding: 0 30px 0 44px;
8
8
  margin: 0;
9
9
  -webkit-touch-callout: none;
@@ -19,6 +19,7 @@
19
19
  flex: 3;
20
20
  display: flex;
21
21
  align-items: center;
22
+ gap: 8px;
22
23
  }
23
24
 
24
25
  #luckysheet-bottom-pager {
@@ -92,21 +93,19 @@
92
93
 
93
94
  .luckysheet-sheet-area div.luckysheet-sheets-item {
94
95
  padding: 2px 6px;
95
- height: 29px;
96
+ height: 34px;
96
97
  line-height: 29px;
97
98
  background-color: #fafafc;
98
- color: #676464;
99
+ color: var(--color-text-default);
99
100
  min-width: 30px;
100
101
  top: 0px;
101
102
  position: relative;
102
103
  margin-right: -1px;
103
104
  cursor: pointer;
104
105
  transition: all 0.1s;
105
- font-size: 13px;
106
+ font-size: 14px;
106
107
  padding: 2px 19px 0px 5px;
107
108
  box-sizing: border-box;
108
- border-left: 1px solid #e0e0e0;
109
- border-right: 1px solid #e0e0e0;
110
109
  vertical-align: middle;
111
110
  }
112
111
 
@@ -115,9 +114,8 @@
115
114
  }
116
115
 
117
116
  .luckysheet-sheet-area div.luckysheet-sheets-item:hover {
118
- background-color: #efefef;
117
+ background-color: hsl(var(--color-button-secondary-hover));
119
118
  /* border-color: #a5a5a5; */
120
- color: #490500;
121
119
  }
122
120
 
123
121
  .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-menu {
@@ -155,7 +153,7 @@
155
153
  .luckysheet-sheet-area
156
154
  div.luckysheet-sheets-item
157
155
  .luckysheet-sheets-item-name[contenteditable="true"] {
158
- border: 1px solid #d9d9d9;
156
+ border-bottom: 1px solid #d9d9d9;
159
157
  display: inline-block;
160
158
  height: 18px;
161
159
  line-height: 18px;
@@ -180,30 +178,24 @@
180
178
 
181
179
  .luckysheet-sheet-area div.luckysheet-sheets-item-active {
182
180
  /* padding: 2px 8px; */
183
- height: 29px;
181
+ height: 34px;
184
182
  line-height: 29px;
185
- background-color: #efefef;
186
183
  /* border-color: #aaa; */
187
- border-top-color: #fff;
188
- color: #222;
184
+ border-bottom: 5px solid #EFC703;
185
+ color: hsl(var(--color-text-default));
189
186
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
190
187
  /* top: -2px; */
191
188
  /* border-bottom: none; */
192
189
  /* padding-right: 20px; */
193
190
  }
194
191
 
195
- .luckysheet-sheet-area div.luckysheet-sheets-item-active:hover {
196
- background-color: #ececec;
197
- /* border-color: #aaa; */
198
- color: #222;
199
- }
200
-
201
192
  .fortune-sheettab-button {
202
193
  display: flex;
203
194
  align-items: center;
204
195
  justify-content: center;
205
196
  height: 29px;
206
197
  width: 29px;
198
+ background-color: var(--color-bg-secondary);
207
199
  }
208
200
 
209
201
  .fortune-sheettab-button:hover {
@@ -212,7 +204,7 @@
212
204
  justify-content: center;
213
205
  height: 29px;
214
206
  width: 29px;
215
- background-color: #efefef;
207
+ background-color: hsl(var(--color-button-secondary-hover));
216
208
  }
217
209
 
218
210
  .luckysheet-noselected-text {
package/lib/components/SheetTab/index.js CHANGED
@@ -11,7 +11,6 @@ var _ui = require("@fileverse/ui");
11
11
  var _usehooksTs = require("usehooks-ts");
12
12
  var _fortuneCore = require("@fileverse-dev/fortune-core");
13
13
  var _context = _interopRequireDefault(require("../../context"));
14
- var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
15
14
  require("./index.css");
16
15
  var _SheetItem = _interopRequireDefault(require("./SheetItem"));
17
16
  var _ZoomControl = _interopRequireDefault(require("../ZoomControl"));
@@ -168,21 +167,21 @@ var SheetTab = function SheetTab() {
168
167
  },
169
168
  onClick: handleCloseDisclaimer
170
169
  }, "Close"))))), /*#__PURE__*/_react.default.createElement("div", {
171
- className: "luckysheet-sheet-area luckysheet-noselected-text",
170
+ className: "luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
172
171
  onContextMenu: function onContextMenu(e) {
173
172
  return e.preventDefault();
174
173
  },
175
174
  id: "luckysheet-sheet-area"
176
175
  }, /*#__PURE__*/_react.default.createElement("div", {
177
176
  id: "luckysheet-sheet-content"
178
- }, context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
179
- className: "fortune-sheettab-button",
180
- onClick: onAddSheetClick
181
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
182
- name: "plus",
183
- width: 16,
184
- height: 16
185
- }))), context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
177
+ }, context.allowEdit && (/*#__PURE__*/_react.default.createElement(_ui.IconButton, {
178
+ className: "fortune-sheettab-button border-none shadow-none",
179
+ onClick: onAddSheetClick,
180
+ elevation: 1,
181
+ icon: "Plus",
182
+ size: "md",
183
+ variant: "secondary"
184
+ })), context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
186
185
  className: "sheet-list-container"
187
186
  }, /*#__PURE__*/_react.default.createElement("div", {
188
187
  id: "all-sheets",
@@ -195,10 +194,12 @@ var SheetTab = function SheetTab() {
195
194
  ctx.sheetTabContextMenu = {};
196
195
  });
197
196
  }
198
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
199
- name: "all-sheets",
200
- width: 16,
201
- height: 16
197
+ }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
198
+ className: "fortune-sheettab-button border-none shadow-none",
199
+ elevation: 1,
200
+ icon: "Menu",
201
+ size: "md",
202
+ variant: "secondary"
202
203
  })))), /*#__PURE__*/_react.default.createElement("div", {
203
204
  id: "luckysheet-sheets-m",
204
205
  className: "luckysheet-sheets-m lucky-button-custom"
@@ -222,31 +223,27 @@ var SheetTab = function SheetTab() {
222
223
  });
223
224
  })), isShowBoundary && isShowScrollBtn && (/*#__PURE__*/_react.default.createElement("div", {
224
225
  className: "boundary boundary-right"
225
- }))), isShowScrollBtn && (/*#__PURE__*/_react.default.createElement("div", {
226
+ }))), isShowScrollBtn && (/*#__PURE__*/_react.default.createElement(_ui.IconButton, {
226
227
  id: "fortune-sheettab-leftscroll",
227
- className: "fortune-sheettab-scroll",
228
- ref: leftScrollRef,
228
+ className: "fortune-sheettab-button border-none shadow-none",
229
229
  onClick: function onClick() {
230
230
  scrollBy(-scrollDelta);
231
231
  },
232
- tabIndex: 0
233
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
234
- name: "arrow-doubleleft",
235
- width: 12,
236
- height: 12
237
- }))), isShowScrollBtn && (/*#__PURE__*/_react.default.createElement("div", {
238
- id: "fortune-sheettab-rightscroll",
239
- className: "fortune-sheettab-scroll",
240
- ref: rightScrollRef,
232
+ elevation: 1,
233
+ icon: "ChevronLeft",
234
+ size: "md",
235
+ variant: "secondary"
236
+ })), isShowScrollBtn && (/*#__PURE__*/_react.default.createElement(_ui.IconButton, {
237
+ id: "fortune-sheettab-leftscroll",
238
+ className: "fortune-sheettab-button border-none shadow-none",
241
239
  onClick: function onClick() {
242
240
  scrollBy(scrollDelta);
243
241
  },
244
- tabIndex: 0
245
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
246
- name: "arrow-doubleright",
247
- width: 12,
248
- height: 12
249
- })))), /*#__PURE__*/_react.default.createElement("div", {
242
+ elevation: 1,
243
+ icon: "ChevronRight",
244
+ size: "md",
245
+ variant: "secondary"
246
+ }))), /*#__PURE__*/_react.default.createElement("div", {
250
247
  className: "fortune-sheet-area-right"
251
248
  }, statsFilter.length === 6 && (/*#__PURE__*/_react.default.createElement(_ui.Popover, null, /*#__PURE__*/_react.default.createElement(_ui.PopoverTrigger, {
252
249
  className: "p-0 m-0 mr-2"
package/lib/components/Workbook/index.js CHANGED
@@ -732,15 +732,7 @@ var Workbook = /*#__PURE__*/_react.default.forwardRef(function (_a, ref) {
732
732
  e.stopPropagation();
733
733
  },
734
734
  className: "fortune-popover-backdrop"
735
- })), /*#__PURE__*/_react.default.createElement("div", {
736
- className: "fortune-stat-area"
737
- }, /*#__PURE__*/_react.default.createElement("div", {
738
- className: "luckysheet-sheet-selection-calInfo"
739
- }, !!calInfo.count && (/*#__PURE__*/_react.default.createElement("div", {
740
- style: {
741
- width: "60px"
742
- }
743
- }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/_react.default.createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/_react.default.createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/_react.default.createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/_react.default.createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/_react.default.createElement(_DunePreview.default, {
735
+ })), context.showDunePreview && (/*#__PURE__*/_react.default.createElement(_DunePreview.default, {
744
736
  url: context.showDunePreview.url,
745
737
  position: context.showDunePreview.position,
746
738
  onKeepAsLink: function onKeepAsLink() {
package/lib/components/ZoomControl/index.css CHANGED
@@ -12,11 +12,14 @@
12
12
  align-items: center;
13
13
  justify-content: center;
14
14
  width: 24px;
15
- height: 24px;
15
+ height: 28px;
16
+ border-radius: 3px;
17
+ color: var(--color-text-default);
18
+ font-size: 14px;
16
19
  }
17
20
 
18
21
  .fortune-zoom-button:hover {
19
- background: #efefef;
22
+ background-color: hsl(var(--color-button-secondary-hover));
20
23
  }
21
24
 
22
25
  .fortune-zoom-ratio {
package/lib/components/ZoomControl/index.js CHANGED
@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _fortuneCore = require("@fileverse-dev/fortune-core");
10
+ var _ui = require("@fileverse/ui");
10
11
  var _context = _interopRequireDefault(require("../../context"));
11
- var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
12
12
  var _useOutsideClick = require("../../hooks/useOutsideClick");
13
13
  require("./index.css");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -85,18 +85,17 @@ var ZoomControl = function ZoomControl() {
85
85
  }, [context.zoomRatio]);
86
86
  return /*#__PURE__*/_react.default.createElement("div", {
87
87
  className: "fortune-zoom-container"
88
- }, /*#__PURE__*/_react.default.createElement("div", {
89
- className: "fortune-zoom-button",
88
+ }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
89
+ className: "fortune-sheettab-button border-none shadow-none",
90
90
  onClick: function onClick(e) {
91
91
  zoomTo(context.zoomRatio - 0.1);
92
92
  e.stopPropagation();
93
93
  },
94
- tabIndex: 0
95
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
96
- name: "minus",
97
- width: 16,
98
- height: 16
99
- })), /*#__PURE__*/_react.default.createElement("div", {
94
+ elevation: 1,
95
+ icon: "Minus",
96
+ size: "md",
97
+ variant: "secondary"
98
+ }), /*#__PURE__*/_react.default.createElement("div", {
100
99
  className: "fortune-zoom-ratio"
101
100
  }, /*#__PURE__*/_react.default.createElement("div", {
102
101
  className: "fortune-zoom-ratio-current fortune-zoom-button",
@@ -119,17 +118,16 @@ var ZoomControl = function ZoomControl() {
119
118
  }, /*#__PURE__*/_react.default.createElement("div", {
120
119
  className: "fortune-zoom-ratio-text"
121
120
  }, v.text));
122
- })))), /*#__PURE__*/_react.default.createElement("div", {
123
- className: "fortune-zoom-button",
121
+ })))), /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
122
+ className: "fortune-sheettab-button border-none shadow-none",
124
123
  onClick: function onClick(e) {
125
124
  zoomTo(context.zoomRatio + 0.1);
126
125
  e.stopPropagation();
127
126
  },
128
- tabIndex: 0
129
- }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
130
- name: "plus",
131
- width: 16,
132
- height: 16
133
- })));
127
+ elevation: 1,
128
+ icon: "Plus",
129
+ size: "md",
130
+ variant: "secondary"
131
+ }));
134
132
  };
135
133
  var _default = exports.default = ZoomControl;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.1.74",
3
+ "version": "1.1.75",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "module": "es/index.js",
@@ -16,7 +16,7 @@
16
16
  "tsc": "tsc"
17
17
  },
18
18
  "dependencies": {
19
- "@fileverse-dev/fortune-core": "1.1.74",
19
+ "@fileverse-dev/fortune-core": "1.1.75",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",