diff --git a/common/shared/package.json b/common/shared/package.json index 73ccf8e57a..71cd67cfc7 100644 --- a/common/shared/package.json +++ b/common/shared/package.json @@ -24,7 +24,7 @@ "univer-cli": "bin/index.ts" }, "dependencies": { - "@typescript-eslint/parser": "^8.31.0", + "@typescript-eslint/parser": "^8.31.1", "@vitejs/plugin-react": "^4.4.1", "@vitejs/plugin-vue": "^5.2.3", "@vitest/coverage-istanbul": "^3.1.2", @@ -38,7 +38,7 @@ "tailwind-scrollbar": "^3.1.0", "tailwindcss": "^3.4.17", "tailwindcss-rem-to-px": "^0.1.1", - "vite": "^6.3.3", + "vite": "^6.3.4", "vite-plugin-dts": "^4.5.3", "vite-plugin-external": "^6.2.1", "vitest": "^3.1.2" @@ -46,7 +46,7 @@ "devDependencies": { "@types/fs-extra": "^11.0.4", "@univerjs/icons": "^0.3.24", - "@univerjs/icons-svg": "^0.3.22", + "@univerjs/icons-svg": "^0.3.24", "@univerjs/protocol": "0.1.45" } } diff --git a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png index 15b33a296e..6468716fb0 100644 Binary files a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png index 96ee659d06..d6a0e89299 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png index a3751bded9..03e06c1b49 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png differ diff --git a/examples/package.json b/examples/package.json index 53fce71212..00468bd243 100644 --- a/examples/package.json +++ b/examples/package.json @@ -27,7 +27,6 @@ "@univerjs/docs-drawing-ui": "workspace:*", "@univerjs/docs-hyper-link-ui": "workspace:*", "@univerjs/docs-mention-ui": "workspace:*", - "@univerjs/docs-quick-insert-ui": "workspace:*", "@univerjs/docs-thread-comment-ui": "workspace:*", "@univerjs/docs-ui": "workspace:*", @@ -36,7 +35,7 @@ "@univerjs/engine-formula": "workspace:*", "@univerjs/engine-render": "workspace:*", "@univerjs/find-replace": "workspace:*", - "@univerjs/icons": "0.3.23", + "@univerjs/icons": "0.3.24", "@univerjs/mockdata": "workspace:*", "@univerjs/network": "workspace:*", "@univerjs/rpc": "workspace:*", diff --git a/package.json b/package.json index 9f02100619..8020fb5431 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@types/fs-extra": "^11.0.4", "@types/node": "^22.15.3", "@types/react": "^19.1.2", - "@types/react-dom": "^19.1.2", + "@types/react-dom": "^19.1.3", "@univerjs-infra/shared": "workspace:*", "@univerjs/design": "workspace:*", "@vitejs/plugin-react": "^4.4.1", @@ -72,7 +72,7 @@ "fs-extra": "^11.3.0", "husky": "^9.1.7", "lint-staged": "^15.5.1", - "posthog-node": "^4.14.0", + "posthog-node": "^4.15.0", "react": "^19.1.0", "react-dom": "^19.1.0", "release-it": "^17.11.0", diff --git a/packages-experimental/action-recorder/package.json b/packages-experimental/action-recorder/package.json index c73998499f..ad0f3f7d81 100644 --- a/packages-experimental/action-recorder/package.json +++ b/packages-experimental/action-recorder/package.json @@ -80,7 +80,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages-experimental/debugger/package.json b/packages-experimental/debugger/package.json index c5938a6004..2354700032 100644 --- a/packages-experimental/debugger/package.json +++ b/packages-experimental/debugger/package.json @@ -85,7 +85,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2", "vue": "^3.5.13" } diff --git a/packages-experimental/sheets-source-binding/package.json b/packages-experimental/sheets-source-binding/package.json index 3cd7662a51..e57b53f0b7 100644 --- a/packages-experimental/sheets-source-binding/package.json +++ b/packages-experimental/sheets-source-binding/package.json @@ -77,7 +77,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages-experimental/uni-docs-ui/package.json b/packages-experimental/uni-docs-ui/package.json index aad01ef756..72076fff79 100644 --- a/packages-experimental/uni-docs-ui/package.json +++ b/packages-experimental/uni-docs-ui/package.json @@ -73,7 +73,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages-experimental/uni-formula-ui/package.json b/packages-experimental/uni-formula-ui/package.json index 9cb7898a0e..d4e701a1d1 100644 --- a/packages-experimental/uni-formula-ui/package.json +++ b/packages-experimental/uni-formula-ui/package.json @@ -85,7 +85,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages-experimental/uni-formula/package.json b/packages-experimental/uni-formula/package.json index 8e0f6a31fe..fe81c9a4ca 100644 --- a/packages-experimental/uni-formula/package.json +++ b/packages-experimental/uni-formula/package.json @@ -61,7 +61,7 @@ "devDependencies": { "@univerjs-infra/shared": "workspace:*", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages-experimental/uni-sheets-ui/package.json b/packages-experimental/uni-sheets-ui/package.json index cfa3191b23..4aafdb03c8 100644 --- a/packages-experimental/uni-sheets-ui/package.json +++ b/packages-experimental/uni-sheets-ui/package.json @@ -78,7 +78,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages-experimental/uni-slides-ui/package.json b/packages-experimental/uni-slides-ui/package.json index 42a142b69a..5c802c88ff 100644 --- a/packages-experimental/uni-slides-ui/package.json +++ b/packages-experimental/uni-slides-ui/package.json @@ -74,7 +74,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages-experimental/uniui/package.json b/packages-experimental/uniui/package.json index 716b8c27c0..53c43f3bee 100644 --- a/packages-experimental/uniui/package.json +++ b/packages-experimental/uniui/package.json @@ -79,7 +79,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/core/package.json b/packages/core/package.json index ad41c97272..854258aace 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -94,7 +94,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/data-validation/package.json b/packages/data-validation/package.json index 38e9c81281..02646986d1 100644 --- a/packages/data-validation/package.json +++ b/packages/data-validation/package.json @@ -70,7 +70,7 @@ "@univerjs/sheets": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/design/package.json b/packages/design/package.json index 387ca71a4f..2d51a935de 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -102,7 +102,7 @@ "tailwindcss": "^3.4.17", "tailwindcss-animate": "^1.0.7", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-drawing-ui/package.json b/packages/docs-drawing-ui/package.json index e981acf037..cb51d60a30 100644 --- a/packages/docs-drawing-ui/package.json +++ b/packages/docs-drawing-ui/package.json @@ -85,7 +85,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-drawing/package.json b/packages/docs-drawing/package.json index 90e630ea6b..3fc0694e2e 100644 --- a/packages/docs-drawing/package.json +++ b/packages/docs-drawing/package.json @@ -62,7 +62,7 @@ "devDependencies": { "@univerjs-infra/shared": "workspace:*", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-hyper-link-ui/package.json b/packages/docs-hyper-link-ui/package.json index 75f1bd7c2a..30ae6a11bb 100644 --- a/packages/docs-hyper-link-ui/package.json +++ b/packages/docs-hyper-link-ui/package.json @@ -82,7 +82,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-hyper-link/package.json b/packages/docs-hyper-link/package.json index d4940f3ebb..a318add5c6 100644 --- a/packages/docs-hyper-link/package.json +++ b/packages/docs-hyper-link/package.json @@ -61,7 +61,7 @@ "devDependencies": { "@univerjs-infra/shared": "workspace:*", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-mention-ui/package.json b/packages/docs-mention-ui/package.json index fad07b452a..a2171a29d2 100644 --- a/packages/docs-mention-ui/package.json +++ b/packages/docs-mention-ui/package.json @@ -75,7 +75,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-quick-insert-ui/package.json b/packages/docs-quick-insert-ui/package.json index befa63fea0..ec0a9038f1 100644 --- a/packages/docs-quick-insert-ui/package.json +++ b/packages/docs-quick-insert-ui/package.json @@ -85,7 +85,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-thread-comment-ui/package.json b/packages/docs-thread-comment-ui/package.json index e8834ecfa5..92b41b95a3 100644 --- a/packages/docs-thread-comment-ui/package.json +++ b/packages/docs-thread-comment-ui/package.json @@ -76,7 +76,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-ui/package.json b/packages/docs-ui/package.json index 99eb52f590..a064f9fb38 100644 --- a/packages/docs-ui/package.json +++ b/packages/docs-ui/package.json @@ -97,7 +97,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/docs-ui/src/views/count-bar/CountBar.tsx b/packages/docs-ui/src/views/count-bar/CountBar.tsx index 838df4f97b..41bdacfd64 100644 --- a/packages/docs-ui/src/views/count-bar/CountBar.tsx +++ b/packages/docs-ui/src/views/count-bar/CountBar.tsx @@ -24,7 +24,7 @@ interface ICountBarProps { export function CountBar(_props: ICountBarProps) { return ( -
+
); diff --git a/packages/docs/package.json b/packages/docs/package.json index 09a6315798..e598188212 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -68,7 +68,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/drawing-ui/package.json b/packages/drawing-ui/package.json index 58c1530cc0..37d76122a5 100644 --- a/packages/drawing-ui/package.json +++ b/packages/drawing-ui/package.json @@ -81,7 +81,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/drawing/package.json b/packages/drawing/package.json index 274cc68bca..0955cf3867 100644 --- a/packages/drawing/package.json +++ b/packages/drawing/package.json @@ -66,7 +66,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/engine-formula/package.json b/packages/engine-formula/package.json index 3cfaa1c1ef..580f5cfd66 100644 --- a/packages/engine-formula/package.json +++ b/packages/engine-formula/package.json @@ -83,7 +83,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/engine-numfmt/package.json b/packages/engine-numfmt/package.json index 123c4050dc..03b114481b 100644 --- a/packages/engine-numfmt/package.json +++ b/packages/engine-numfmt/package.json @@ -60,7 +60,7 @@ "devDependencies": { "@univerjs-infra/shared": "workspace:*", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/engine-render/package.json b/packages/engine-render/package.json index 548f1a464b..debf0cbfbb 100644 --- a/packages/engine-render/package.json +++ b/packages/engine-render/package.json @@ -73,7 +73,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" }, "browser": { diff --git a/packages/find-replace/package.json b/packages/find-replace/package.json index b64cda7b04..52ed0f493c 100644 --- a/packages/find-replace/package.json +++ b/packages/find-replace/package.json @@ -81,7 +81,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/network/package.json b/packages/network/package.json index bc9386654c..3d48ad3c0c 100644 --- a/packages/network/package.json +++ b/packages/network/package.json @@ -77,7 +77,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/rpc-node/package.json b/packages/rpc-node/package.json index df967308a1..ff4fb848e0 100644 --- a/packages/rpc-node/package.json +++ b/packages/rpc-node/package.json @@ -66,7 +66,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/rpc/package.json b/packages/rpc/package.json index 74f1073cc7..49b7013e29 100644 --- a/packages/rpc/package.json +++ b/packages/rpc/package.json @@ -66,7 +66,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/sheets-conditional-formatting-ui/package.json b/packages/sheets-conditional-formatting-ui/package.json index f8a8603f0c..9a609ed282 100644 --- a/packages/sheets-conditional-formatting-ui/package.json +++ b/packages/sheets-conditional-formatting-ui/package.json @@ -85,13 +85,12 @@ "devDependencies": { "@types/react-grid-layout": "^1.3.5", "@univerjs-infra/shared": "workspace:*", - "less": "^4.3.0", "postcss": "^8.5.3", "react": "18.3.1", "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.3", + "vite": "^6.3.4", "vitest": "^3.1.2" } } diff --git a/packages/sheets-conditional-formatting-ui/src/components/conditional-style-editor/index.module.less b/packages/sheets-conditional-formatting-ui/src/components/conditional-style-editor/index.module.less deleted file mode 100644 index 8172758083..0000000000 --- a/packages/sheets-conditional-formatting-ui/src/components/conditional-style-editor/index.module.less +++ /dev/null @@ -1,18 +0,0 @@ -.cf-style-edit { - display: flex; - justify-content: space-between; - margin: 10px 0px; - .button-item { - cursor: pointer; - border-radius: var(--border-radius-base); - display: flex; - align-items: center; - padding: 0px 3px; - &:hover { - background-color: rgb(var(--grey-100)); - } - } - .isActive { - background-color: rgb(var(--grey-100)); - } -} diff --git a/packages/sheets-conditional-formatting-ui/src/components/conditional-style-editor/index.tsx b/packages/sheets-conditional-formatting-ui/src/components/conditional-style-editor/index.tsx index 5edde0611a..4bb494ef53 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/conditional-style-editor/index.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/conditional-style-editor/index.tsx @@ -21,7 +21,6 @@ import { removeUndefinedAttr } from '@univerjs/sheets-conditional-formatting'; import { ComponentManager, useDependency } from '@univerjs/ui'; import { useEffect, useState } from 'react'; import { ColorPicker } from '../color-picker'; -import styles from './index.module.less'; interface IConditionalStyleEditorProps { className?: string; @@ -101,13 +100,16 @@ export const ConditionalStyleEditor = (props: IConditionalStyleEditorProps) => { } onChange(removeUndefinedAttr(resultStyle)); }, [isBold, isItalic, isUnderline, isStrikethrough, fontColor, bgColor]); + + const buttonItemClassName = 'univer-flex univer-cursor-pointer univer-items-center univer-rounded univer-px-1'; + return ( -
+
{BoldSingleIcon && (
isBoldSet(getAnotherBooleanNumber(isBold))} > @@ -115,7 +117,9 @@ export const ConditionalStyleEditor = (props: IConditionalStyleEditorProps) => { )} {ItalicSingleIcon && (
isItalicSet(getAnotherBooleanNumber(isItalic))} > @@ -123,7 +127,9 @@ export const ConditionalStyleEditor = (props: IConditionalStyleEditorProps) => { )} {UnderlineSingleIcon && (
isUnderlineSet(getAnotherBooleanNumber(isUnderline))} > @@ -131,7 +137,9 @@ export const ConditionalStyleEditor = (props: IConditionalStyleEditorProps) => { )} {StrikethroughSingle && (
isStrikethroughSet(getAnotherBooleanNumber(isStrikethrough))} > diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/index.module.less b/packages/sheets-conditional-formatting-ui/src/components/panel/index.module.less deleted file mode 100644 index fbf9e71a2d..0000000000 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/index.module.less +++ /dev/null @@ -1,45 +0,0 @@ -.conditional-formatting-wrap { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - - .cf-rule-item { - display: flex; - justify-content: space-between; - align-items: center; - .preview { - flex-shrink: 0; - } - } - .create-rule { - margin-bottom: 20px; - .button { - border: 1px solid rgb(var(--border-color)); - border-radius: var(--border-radius-base); - display: flex; - align-items: center; - justify-content: center; - padding: var(--padding-base); - cursor: pointer; - font-size: var(--font-size-sm); - } - } - .title { - margin-top: var(--margin-base); - font-size: 15px; - color: rgb(var(--text-color-secondary)); - } - .label { - font-size: 12px; - margin-top: var(--margin-sm); - color: rgb(var(--text-color-secondary)); - } - .label-container { - display: flex; - align-items: center; - .input-width { - width: 100px; - } - } -} diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/index.tsx b/packages/sheets-conditional-formatting-ui/src/components/panel/index.tsx index 37493f2b9f..2fb6aa95dd 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/index.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/panel/index.tsx @@ -14,11 +14,10 @@ * limitations under the License. */ -import React, { useState } from 'react'; import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting'; -import styles from './index.module.less'; -import { RuleList } from './rule-list'; +import { useState } from 'react'; import { RuleEdit } from './rule-edit'; +import { RuleList } from './rule-list'; interface IConditionFormattingPanelProps { rule?: IConditionFormattingRule }; @@ -41,7 +40,7 @@ export const ConditionFormattingPanel = (props: IConditionFormattingPanelProps) }; return ( -
+
{isShowRuleEditor ? ( diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/ColorScale.tsx b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/ColorScale.tsx index 0b5e344edd..1c7a2a1654 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/ColorScale.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/ColorScale.tsx @@ -19,15 +19,14 @@ import type { IColorScale, IConditionalFormattingRuleConfig } from '@univerjs/sh import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui'; import type { IStyleEditorProps } from './type'; import { IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core'; -import { clsx, InputNumber, Select } from '@univerjs/design'; +import { InputNumber, Select } from '@univerjs/design'; import { CFRuleType, CFValueType, createDefaultValueByValueType } from '@univerjs/sheets-conditional-formatting'; import { FormulaEditor } from '@univerjs/sheets-formula-ui'; import { useDependency, useSidebarClick } from '@univerjs/ui'; import { useEffect, useMemo, useRef, useState } from 'react'; import { ColorPicker } from '../../color-picker'; import { Preview } from '../../preview'; -import stylesBase from '../index.module.less'; -import styles from './index.module.less'; +import { previewClassName } from './styles'; const createOptionItem = (text: string, localeService: LocaleService) => ({ label: localeService.t(`sheet.cf.valueType.${text}`), value: text }); @@ -57,16 +56,16 @@ const TextInput = (props: { id: string; type: CFValueType | 'none'; value: numbe }, [type]); const formulaEditorRef = useRef(null); - const [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(false); + const [isFocusFormulaEditor, setIsFocusFormulaEditor] = useState(false); useSidebarClick((e: MouseEvent) => { const isOutSide = formulaEditorRef.current?.isClickOutSide(e); - isOutSide && isFocusFormulaEditorSet(false); + isOutSide && setIsFocusFormulaEditor(false); }); if (type === CFValueType.formula) { return ( -
+
isFocusFormulaEditorSet(true)} + onFocus={() => setIsFocusFormulaEditor(true)} ref={formulaEditorRef} />
@@ -95,14 +94,14 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { const medianOptions = [createOptionItem('none', localeService), ...commonOptions]; const maxOptions = [createOptionItem(CFValueType.max, localeService), ...commonOptions]; - const [minType, minTypeSet] = useState(() => { + const [minType, setMinType] = useState(() => { const defaultV = CFValueType.min; if (!rule) { return defaultV; } return rule.config[0]?.value.type || defaultV; }); - const [medianType, medianTypeSet] = useState(() => { + const [medianType, setMedianType] = useState(() => { const defaultV = 'none'; if (!rule) { return defaultV; @@ -112,7 +111,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { } return rule.config[1]?.value.type || defaultV; }); - const [maxType, maxTypeSet] = useState(() => { + const [maxType, setMaxType] = useState(() => { const defaultV = CFValueType.max; if (!rule) { return defaultV; @@ -120,7 +119,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { return rule.config[rule.config.length - 1]?.value.type || defaultV; }); - const [minValue, minValueSet] = useState(() => { + const [minValue, setMinValue] = useState(() => { const defaultV = 10; if (!rule) { return defaultV; @@ -128,7 +127,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { const valueConfig = rule.config[0]; return valueConfig?.value.value === undefined ? defaultV : valueConfig?.value.value; }); - const [medianValue, medianValueSet] = useState(() => { + const [medianValue, setMedianValue] = useState(() => { const defaultV = 50; if (!rule) { return defaultV; @@ -139,7 +138,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { const v = rule.config[1]?.value.value; return v === undefined ? defaultV : v; }); - const [maxValue, maxValueSet] = useState(() => { + const [maxValue, setMaxValue] = useState(() => { const defaultV = 90; if (!rule) { return defaultV; @@ -148,14 +147,14 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { return v === undefined ? defaultV : v; }); - const [minColor, minColorSet] = useState(() => { + const [minColor, setMinColor] = useState(() => { const defaultV = '#d0d9fb'; if (!rule) { return defaultV; } return rule.config[0]?.color || defaultV; }); - const [medianColor, medianColorSet] = useState(() => { + const [medianColor, setMedianColor] = useState(() => { const defaultV = '#7790f3'; if (!rule) { return defaultV; @@ -165,7 +164,7 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { } return rule.config[1]?.color || defaultV; }); - const [maxColor, maxColorSet] = useState(() => { + const [maxColor, setMaxColor] = useState(() => { const defaultV = '#2e55ef'; if (!rule) { return defaultV; @@ -217,29 +216,24 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { }; return (
-
{localeService.t('sheet.cf.panel.styleRule')}
-
+
+ {localeService.t('sheet.cf.panel.styleRule')} +
+
-
{localeService.t('sheet.cf.valueType.min')}
-
+
+ {localeService.t('sheet.cf.valueType.min')} +
+
{ - medianTypeSet(v as CFValueType); + setMedianType(v as CFValueType); const value = createDefaultValueByValueType(v as CFValueType, 50); - medianValueSet(value); - handleChange({ minType, medianType: v as CFValueType, maxType, minValue, medianValue: value, maxValue, minColor, medianColor, maxColor }); + setMedianValue(value); + handleChange({ + minType, + medianType: v as CFValueType, + maxType, + minValue, + medianValue: value, + maxValue, + minColor, + medianColor, + maxColor, + }); }} /> @@ -287,8 +286,18 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { value={medianValue} type={medianType} onChange={(v) => { - medianValueSet(v); - handleChange({ minType, medianType, maxType, minValue, medianValue: v, maxValue, minColor, medianColor, maxColor }); + setMedianValue(v); + handleChange({ + minType, + medianType, + maxType, + minValue, + medianValue: v, + maxValue, + minColor, + medianColor, + maxColor, + }); }} /> {medianType !== 'none' && ( @@ -296,29 +305,44 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => { className="univer-ml-1" color={medianColor} onChange={(v) => { - medianColorSet(v); - handleChange({ minType, medianType, maxType, minValue, medianValue, maxValue, minColor, medianColor: v, maxColor }); + setMedianColor(v); + handleChange({ + minType, + medianType, + maxType, + minValue, + medianValue, + maxValue, + minColor, + medianColor: v, + maxColor, + }); }} /> )}
-
{localeService.t('sheet.cf.valueType.max')}
-
+
{localeService.t('sheet.cf.valueType.max')}
+
{ setMinValueType(v as CFValueType); const value = createDefaultValueByValueType(v as CFValueType, 10); minValueSet(value); - _handleChange({ isGradient, minValue: value, minValueType: v as CFValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue }); + _handleChange({ + isGradient, + minValue: value, + minValueType: v as CFValueType, + maxValue, + maxValueType, + positiveColor, + nativeColor, + isShowValue, + }); }} /> { minValueSet(v || 0); - _handleChange({ isGradient, minValue: v || 0, minValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue }); + _handleChange({ + isGradient, + minValue: v || 0, + minValueType, + maxValue, + maxValueType, + positiveColor, + nativeColor, + isShowValue, + }); }} />
-
{localeService.t('sheet.cf.valueType.max')}
+
{localeService.t('sheet.cf.valueType.max')}
{ - textErrorSet(''); + setTextError(''); _onChange(v); }} /> @@ -134,9 +133,9 @@ const HighlightCellInput = (props: { case CFSubRuleType.number: { if ([CFNumberOperator.equal, CFNumberOperator.notEqual, CFNumberOperator.greaterThan, CFNumberOperator.greaterThanOrEqual, CFNumberOperator.lessThan, CFNumberOperator.lessThanOrEqual].includes(operator as CFNumberOperator)) { const _onChange = (value: number | null) => { - inputNumberValueSet(value || 0); + setInputNumberValue(value || 0); onChange(value || 0); - numberErrorSet(''); + setNumberError(''); }; return (
@@ -154,24 +153,19 @@ const HighlightCellInput = (props: { } if ([CFNumberOperator.between, CFNumberOperator.notBetween].includes(operator as CFNumberOperator)) { const onChangeMin = (_value: number | null) => { - inputNumberMinSet(_value || 0); + setInputNumberMin(_value || 0); const value: [number, number] = [_value || 0, inputNumberMax]; onChange(value); - numberMinErrorSet(''); + setNumberMinError(''); }; const onChangeMax = (_value: number | null) => { - inputNumberMaxSet(_value || 0); + setInputNumberMax(_value || 0); const value: [number, number] = [inputNumberMin, _value || 0]; onChange(value); - numberMaxErrorSet(''); + setNumberMaxError(''); }; return ( -
+
@@ -285,7 +279,7 @@ export const HighlightCellStyleEditor = (props: IStyleEditorProps({}); + const [style, setStyle] = useState({}); const getResult = useMemo(() => (option: { subType?: string; operator?: string; value?: IValue; style?: IHighlightCell['style'] }) => { switch (option.subType || subType) { @@ -373,12 +367,7 @@ export const HighlightCellStyleEditor = (props: IStyleEditorProps -
+
{localeService.t('sheet.cf.panel.styleRule')}
@@ -397,19 +386,23 @@ export const HighlightCellStyleEditor = (props: IStyleEditorProps )}
- -
+ +
{ - styleSet(v); + setStyle(v); onChange(getResult({ style: v })); }} /> diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/IconSet.tsx b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/IconSet.tsx index 30df4462a3..de45138a5b 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/IconSet.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/IconSet.tsx @@ -36,8 +36,6 @@ import { import { FormulaEditor } from '@univerjs/sheets-formula-ui'; import { ILayoutService, useDependency, useScrollYOverContainer, useSidebarClick } from '@univerjs/ui'; import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; -import stylesBase from '../index.module.less'; -import styles from './index.module.less'; const getIcon = (iconType: string, iconId: string | number) => { const arr = iconMap[iconType] || []; @@ -45,15 +43,11 @@ const getIcon = (iconType: string, iconId: string | number) => { }; const TextInput = (props: { id: number; type: CFValueType; value: number | string; onChange: (v: number | string) => void; error?: string }) => { + const { error, type, onChange } = props; + const univerInstanceService = useDependency(IUniverInstanceService); const unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)!.getUnitId(); const subUnitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)!.getActiveSheet()?.getSheetId(); - const className = useMemo(() => { - if (props.error) { - return styles.errorInput; - } - return ''; - }, [props.error]); const formulaEditorRef = useRef(null); const [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(false); @@ -63,14 +57,20 @@ const TextInput = (props: { id: number; type: CFValueType; value: number | strin isOutSide && isFocusFormulaEditorSet(false); }); return ( -
- {props.type !== CFValueType.formula +
+ {type !== CFValueType.formula ? ( <> - props.onChange(v ?? 0)} /> - {props.error && ( -
- {props.error} + onChange(v ?? 0)} + /> + {error && ( +
+ {error}
)} @@ -78,16 +78,16 @@ const TextInput = (props: { id: number; type: CFValueType; value: number | strin : (
{ const formula = v || ''; - props.onChange(formula); + onChange(formula); }} onFocus={() => isFocusFormulaEditorSet(true)} - ref={formulaEditorRef} />
)} @@ -101,35 +101,46 @@ const createDefaultConfigItem = (iconType: IIconType, index: number, list: unkno iconId: String(index), }); -interface IconGroupListProps { +interface IIconGroupListProps { onClick: (iconType: IIconType) => void; iconType?: IIconType; }; -const IconGroupList = forwardRef((props, ref) => { +const IconGroupList = forwardRef((props, ref) => { + const { onClick } = props; const localeService = useDependency(LocaleService); const handleClick = (iconType: IIconType) => { - props.onClick(iconType); + onClick(iconType); }; return ( -
+
{iconGroup.map((group, index) => { return ( -
-
{localeService.t(group.title)}
-
+
+
{localeService.t(group.title)}
+
{group.group.map((groupItem) => { return ( -
{ handleClick(groupItem.name); }}> -
+
{ handleClick(groupItem.name); }} + > + {groupItem.list.map((base64, index) => ( ))} -
+
); })} @@ -143,6 +154,8 @@ const IconGroupList = forwardRef((props, ref }); const IconItemList = (props: { onClick: (iconType: IIconType, iconId: string) => void; iconType?: IIconType; iconId: string }) => { + const { onClick } = props; + const list = useMemo(() => { const result: { iconType: IIconType; iconId: string; base64: string }[] = []; for (const key in iconMap) { @@ -158,28 +171,40 @@ const IconItemList = (props: { onClick: (iconType: IIconType, iconId: string) => } return result; }, []); + const handleClick = (item: typeof list[0]) => { - props.onClick(item.iconType, item.iconId); + onClick(item.iconType, item.iconId); }; + return ( -
-
handleClick({ iconType: EMPTY_ICON_TYPE as any, iconId: '', base64: '' })}> +
+
handleClick({ iconType: EMPTY_ICON_TYPE as any, iconId: '', base64: '' })} + > - 无单元格图标 + 无单元格图标
-
+
{list.map((item) => ( -
+
handleClick(item)} src={item.base64} + draggable={false} + onClick={() => handleClick(item)} />
))}
- ); }; @@ -235,8 +260,8 @@ const IconSetRuleEdit = (props: { >
{!isFirst && !isEnd && localeService.t('sheet.cf.iconSet.rule')} {!isFirst && !isEnd && ( - + ( {localeService.t('sheet.cf.iconSet.when')} {localeService.t(`sheet.cf.symbol.${getOppositeOperator(preItem.operator)}`)} @@ -272,8 +297,22 @@ const IconSetRuleEdit = (props: {
)} > -
- {icon ? : } +
+ {icon + ? + : ( + + )}
@@ -287,15 +326,9 @@ const IconSetRuleEdit = (props: { /> ) : ( -
+
{localeService.t('sheet.cf.iconSet.rule')} - + {localeService.t('sheet.cf.iconSet.when')} {localeService.t(`sheet.cf.symbol.${getOppositeOperator(preItem.operator)}`)} {lessThanText} @@ -309,9 +342,8 @@ const IconSetRuleEdit = (props: { <>
@@ -515,11 +547,11 @@ export const IconSet = (props: IStyleEditorProps) => { useScrollYOverContainer(iconGroupListEl, layoutService.rootContainerElement); return ( -
-
{localeService.t('sheet.cf.panel.styleRule')}
-
+
+
+ {localeService.t('sheet.cf.panel.styleRule')} +
+
@@ -533,28 +565,26 @@ export const IconSet = (props: IStyleEditorProps) => {
)} > -
+
{previewIcon}
-
-
+
+
{localeService.t('sheet.cf.iconSet.reverseIconOrder')}
-
+
{ isShowValueSet(!v); }} /> {localeService.t('sheet.cf.iconSet.onlyShowIcon')}
diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/Rank.tsx b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/Rank.tsx index 20751eff0d..e14ad65c99 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/Rank.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/Rank.tsx @@ -20,11 +20,10 @@ import { LocaleService } from '@univerjs/core'; import { Checkbox, InputNumber, Select } from '@univerjs/design'; import { CFNumberOperator, CFRuleType, CFSubRuleType } from '@univerjs/sheets-conditional-formatting'; import { useDependency } from '@univerjs/ui'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { ConditionalStyleEditor } from '../../conditional-style-editor'; import { Preview } from '../../preview'; -import stylesBase from '../index.module.less'; -import styles from './index.module.less'; +import { previewClassName } from './styles'; export const RankStyleEditor = (props: IStyleEditorProps) => { const { onChange, interceptorManager } = props; @@ -33,7 +32,7 @@ export const RankStyleEditor = (props: IStyleEditorProps) => { const rule = props.rule?.type === CFRuleType.highlightCell ? props.rule : undefined as IRankHighlightCell | IAverageHighlightCell | undefined; const options = [{ label: localeService.t('sheet.cf.panel.isNotBottom'), value: 'isNotBottom' }, { label: localeService.t('sheet.cf.panel.isBottom'), value: 'isBottom' }, { label: localeService.t('sheet.cf.panel.greaterThanAverage'), value: 'greaterThanAverage' }, { label: localeService.t('sheet.cf.panel.lessThanAverage'), value: 'lessThanAverage' }]; - const [type, typeSet] = useState(() => { + const [type, setType] = useState(() => { const defaultV = options[0].value; const type = rule?.type; if (!rule) { @@ -64,7 +63,7 @@ export const RankStyleEditor = (props: IStyleEditorProps) => { } return defaultV; }); - const [value, valueSet] = useState(() => { + const [value, setValue] = useState(() => { const defaultV = 10; const type = rule?.type; if (!rule) { @@ -82,7 +81,7 @@ export const RankStyleEditor = (props: IStyleEditorProps) => { } return defaultV; }); - const [isPercent, isPercentSet] = useState(() => { + const [isPercent, setIsPercent] = useState(() => { const defaultV = false; const type = rule?.type; if (!rule) { @@ -101,7 +100,7 @@ export const RankStyleEditor = (props: IStyleEditorProps) => { return defaultV; }); - const [style, styleSet] = useState({}); + const [style, setStyle] = useState({}); const getResult = (config: { type: string; @@ -142,12 +141,7 @@ export const RankStyleEditor = (props: IStyleEditorProps) => { }; return (
-
+
{localeService.t('sheet.cf.panel.styleRule')}
('beforeSubmit'); export const submit = createInterceptorKey('submit'); diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.module.less b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.module.less deleted file mode 100644 index ceac91747c..0000000000 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.module.less +++ /dev/null @@ -1,137 +0,0 @@ -.cf-rule-list { - .rule-selector { - color: rgb(var(--text-color-secondary)); - font-size: 12px; - display: flex; - justify-content: space-between; - align-items: center; - .select { - color: rgb(var(--text-color)); - width: 138px; - .select-selector { - border: none; - padding: 0; - } - .select-selection-item { - top: -2px; - left: 4px; - } - .select-selection-search-input { - cursor: pointer; - } - } - .btn-list { - font-size: 16px; - color: black; - display: flex; - justify-content: space-between; - align-items: center; - .gap { - margin-left: 8px; - } - .icon { - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 4px 4px 4px 4px; - padding: 4px; - - &:hover { - background: rgb(var(--grey-300)); - } - } - .disabled { - color: rgb(var(--grey-500)); - display: flex; - align-items: center; - border-radius: 4px 4px 4px 4px; - padding: 4px; - } - } - } - .rule-item { - padding: 8px 32px 8px 20px; - display: flex; - justify-content: space-between; - position: relative; - align-items: center; - border-radius: var(--border-radius-base); - .rule-describe { - max-width: 100%; - min-width: 0px; - overflow: hidden; - flex-shrink: 1; - font-size: var(--font-size-sm); - line-height: 21px; - .rule-type { - font-size: 14px; - line-height: 22px; - color: #1e222b; - } - .rule-range { - font-size: 12px; - line-height: 22px; - color: #7a7a7a; - } - } - &:hover { - background-color: rgb(var(--grey-100)); - } - &.active { - background-color: rgb(var(--grey-100)); - } - .draggableHandle { - display: none; - position: absolute; - left: 0px; - width: 20px; - height: 20px; - border-radius: var(--border-radius-base); - cursor: grab; - // &:hover { - // background-color: rgb(var(--grey-300)); - // } - } - &:hover { - .delete-item { - display: flex; - align-items: center; - justify-content: center; - } - .draggableHandle { - display: flex; - align-items: center; - justify-content: center; - } - } - .delete-item { - display: none; - cursor: pointer; - border-radius: var(--border-radius-base); - position: absolute; - right: 4px; - width: 24px; - height: 24px; - &:hover { - background-color: rgb(var(--grey-300)); - } - } - & .active { - display: flex; - align-items: center; - justify-content: center; - } - } - .grid-layout-wrap { - width: calc(100% - 2 * var(--padding-sm) + 2 * var(--padding-xl)); - margin-left: calc(-1 * var(--padding-xl)); - padding-left: var(--padding-sm); - .react-grid-item { - transition: none; - } - } -} -:global .react-grid-item.react-grid-placeholder { - background: rgb(var(--grey-300)) !important; -} diff --git a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.tsx b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.tsx index 8db470aacd..9df3e6d181 100644 --- a/packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.tsx +++ b/packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.tsx @@ -40,7 +40,6 @@ import GridLayout from 'react-grid-layout'; import { debounceTime, Observable } from 'rxjs'; import { ConditionalFormattingI18nController } from '../../../controllers/cf.i18n.controller'; import { Preview } from '../../preview'; -import styles from './index.module.less'; import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; @@ -319,13 +318,13 @@ export const RuleList = (props: IRuleListProps) => { }, [ruleList]); return ( -
-
-
+
+
+
{conditionalFormattingI18nController.tWithReactNode( 'sheet.cf.panel.managerRuleSelect',