mirror of
https://github.com/dream-num/univer.git
synced 2026-09-21 05:44:04 +08:00
feat(ui): enhance styles (#4868)
Co-authored-by: GitHub Actions <actions@github.com>
This commit is contained in:
白熱
@@ -24,10 +24,10 @@
|
||||
"univer-cli": "bin/index.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@typescript-eslint/parser": "^8.26.1",
|
||||
"@typescript-eslint/parser": "^8.27.0",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vitest/coverage-istanbul": "^3.0.8",
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vitest/coverage-istanbul": "^3.0.9",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint-plugin-readable-tailwind": "^1.9.1",
|
||||
"fs-extra": "^11.3.0",
|
||||
@@ -37,15 +37,15 @@
|
||||
"sort-keys": "^5.1.0",
|
||||
"tailwind-scrollbar": "^3.1.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"vite": "^6.2.1",
|
||||
"vite": "^6.2.2",
|
||||
"vite-plugin-dts": "^4.5.3",
|
||||
"vite-plugin-external": "^6.0.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vitest": "^3.0.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons-svg": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/icons-svg": "^0.2.27",
|
||||
"@univerjs/protocol": "0.1.44"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,24 +16,24 @@
|
||||
"build:storybook": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chromatic-com/storybook": "^3.2.5",
|
||||
"@storybook/addon-essentials": "^8.6.4",
|
||||
"@storybook/addon-interactions": "^8.6.4",
|
||||
"@storybook/addon-links": "^8.6.4",
|
||||
"@chromatic-com/storybook": "^3.2.6",
|
||||
"@storybook/addon-essentials": "^8.6.7",
|
||||
"@storybook/addon-interactions": "^8.6.7",
|
||||
"@storybook/addon-links": "^8.6.7",
|
||||
"@storybook/addon-styling-webpack": "^1.0.1",
|
||||
"@storybook/addon-webpack5-compiler-swc": "^2.1.0",
|
||||
"@storybook/blocks": "^8.6.4",
|
||||
"@storybook/addon-webpack5-compiler-swc": "^3.0.0",
|
||||
"@storybook/blocks": "^8.6.7",
|
||||
"@storybook/icons": "^1.4.0",
|
||||
"@storybook/react": "^8.6.4",
|
||||
"@storybook/react-webpack5": "^8.6.4",
|
||||
"@storybook/types": "^8.6.4",
|
||||
"@storybook/react": "^8.6.7",
|
||||
"@storybook/react-webpack5": "^8.6.7",
|
||||
"@storybook/types": "^8.6.7",
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*",
|
||||
"css-loader": "^7.1.2",
|
||||
"less-loader": "^12.2.0",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"storybook": "^8.6.4",
|
||||
"storybook": "^8.6.7",
|
||||
"storybook-addon-swc": "^1.2.0",
|
||||
"style-loader": "^4.0.0",
|
||||
"tsconfig-paths-webpack-plugin": "^4.2.0",
|
||||
|
||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
+9
-9
@@ -46,17 +46,17 @@
|
||||
"release": "release-it"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "4.10.0",
|
||||
"@antfu/eslint-config": "4.10.2",
|
||||
"@commitlint/cli": "^19.8.0",
|
||||
"@commitlint/config-conventional": "^19.8.0",
|
||||
"@eslint-react/eslint-plugin": "^1.32.0",
|
||||
"@playwright/test": "^1.51.0",
|
||||
"@eslint-react/eslint-plugin": "^1.37.0",
|
||||
"@playwright/test": "^1.51.1",
|
||||
"@release-it-plugins/workspaces": "^4.2.0",
|
||||
"@release-it/conventional-changelog": "^9.0.4",
|
||||
"@storybook/react": "8.6.4",
|
||||
"@storybook/react": "8.6.7",
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/node": "^22.13.10",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/node": "^22.13.11",
|
||||
"@types/react": "^19.0.12",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
@@ -64,7 +64,7 @@
|
||||
"eslint": "9.22.0",
|
||||
"eslint-plugin-format": "^1.0.1",
|
||||
"eslint-plugin-header": "^3.1.1",
|
||||
"eslint-plugin-jsdoc": "^50.6.6",
|
||||
"eslint-plugin-jsdoc": "^50.6.8",
|
||||
"eslint-plugin-no-barrel-import": "^0.0.2",
|
||||
"eslint-plugin-no-penetrating-import": "^0.0.1",
|
||||
"eslint-plugin-react": "^7.37.4",
|
||||
@@ -72,7 +72,7 @@
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"fs-extra": "^11.3.0",
|
||||
"husky": "^9.1.7",
|
||||
"lint-staged": "^15.4.3",
|
||||
"lint-staged": "^15.5.0",
|
||||
"posthog-node": "^4.10.1",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0",
|
||||
@@ -81,7 +81,7 @@
|
||||
"tsx": "^4.19.3",
|
||||
"turbo": "^2.4.4",
|
||||
"typescript": "^5.8.2",
|
||||
"vitest": "^3.0.8"
|
||||
"vitest": "^3.0.9"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
"dependencies": {
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-filter": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
@@ -81,7 +81,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,11 +65,10 @@
|
||||
"dependencies": {
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/docs-drawing": "workspace:*",
|
||||
"@univerjs/docs-drawing-ui": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/mockdata": "workspace:*",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-drawing-ui": "workspace:*",
|
||||
@@ -86,8 +85,8 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8",
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9",
|
||||
"vue": "^3.5.13"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/rpc": "workspace:*",
|
||||
"@univerjs/sheets-formula": "workspace:*",
|
||||
"@univerjs/sheets-formula-ui": "workspace:*",
|
||||
@@ -86,7 +86,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-drawing-ui": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
@@ -78,7 +78,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/slides-ui": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*",
|
||||
"@univerjs/uniui": "workspace:*"
|
||||
@@ -75,7 +75,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*",
|
||||
@@ -80,7 +80,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
"fast-diff": "1.3.0",
|
||||
"kdbush": "^4.0.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"nanoid": "5.1.3",
|
||||
"nanoid": "5.1.5",
|
||||
"numeral": "^2.0.6",
|
||||
"numfmt": "^2.5.2",
|
||||
"ot-json1": "^1.0.2",
|
||||
@@ -87,7 +87,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
"@radix-ui/react-separator": "^1.1.2",
|
||||
"@radix-ui/react-tooltip": "^1.1.8",
|
||||
"@rc-component/trigger": "^2.2.6",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"rc-dialog": "^9.6.0",
|
||||
@@ -101,7 +101,7 @@
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
"@univerjs/drawing": "workspace:*",
|
||||
"@univerjs/drawing-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -85,7 +85,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"@univerjs/docs-hyper-link": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -82,7 +82,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,13 +70,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"less": "^4.2.2",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "18.3.1",
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ import { ICommandService, IMentionIOService, IUniverInstanceService, Tools, Univ
|
||||
import { DocSelectionManagerService } from '@univerjs/docs';
|
||||
import { IEditorService } from '@univerjs/docs-ui';
|
||||
import { useDependency, useObservable } from '@univerjs/ui';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { filter } from 'rxjs';
|
||||
import { AddDocMentionCommand } from '../../commands/commands/doc-mention.command';
|
||||
import { DocMentionPopupService } from '../../services/doc-mention-popup.service';
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
.doc-mention-panel {
|
||||
width: 280px;
|
||||
padding: 8px;
|
||||
max-height: 276px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
background-color: rgb(var(--color-white));
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(var(--grey-200));
|
||||
box-shadow: 0px 4px 16px 0px rgba(30, 34, 43, 0.08);
|
||||
}
|
||||
|
||||
.doc-mention {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
&-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
margin-right: 6px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-active {
|
||||
background: rgb(var(--grey-50));
|
||||
}
|
||||
|
||||
&-icon:hover {
|
||||
background: rgb(var(--grey-50));
|
||||
}
|
||||
|
||||
&-label {
|
||||
overflow: hidden;
|
||||
flex: 1 1 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,6 @@
|
||||
import type { IMention, ITypeMentionList } from '@univerjs/core';
|
||||
import { clsx } from '@univerjs/design';
|
||||
import { useRef, useState } from 'react';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export interface IMentionListProps {
|
||||
mentions: ITypeMentionList[];
|
||||
@@ -36,20 +35,41 @@ export const MentionList = (props: IMentionListProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} data-editorid={editorId} tabIndex={0} className={styles.docMentionPanel} onClick={onClick}>
|
||||
<div
|
||||
ref={ref}
|
||||
data-editorid={editorId}
|
||||
tabIndex={0}
|
||||
className={`
|
||||
univer-max-h-72 univer-w-72 univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid
|
||||
univer-border-gray-200 univer-bg-white univer-p-2 univer-shadow-md
|
||||
`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{mentions.map((typeMentions) => (
|
||||
<div key={typeMentions.type}>
|
||||
<div className={styles.docMentionType}>{typeMentions.title}</div>
|
||||
<div className="univer-mb-2 univer-font-medium">{typeMentions.title}</div>
|
||||
|
||||
{typeMentions.mentions.map((mention) => (
|
||||
<div
|
||||
data-editorid={editorId}
|
||||
key={mention.objectId}
|
||||
className={clsx(styles.docMention, { [styles.docMentionActive]: activeId === mention.objectId })}
|
||||
data-editorid={editorId}
|
||||
className={clsx(`
|
||||
univer-flex univer-cursor-pointer univer-items-center univer-rounded-md univer-p-2
|
||||
`, {
|
||||
'univer-bg-gray-50': activeId === mention.objectId,
|
||||
})}
|
||||
onClick={() => handleSelect(mention)}
|
||||
onMouseEnter={() => setActiveId(mention.objectId)}
|
||||
>
|
||||
<img className={styles.docMentionIcon} src={mention.metadata?.icon as string} />
|
||||
<div className={styles.docMentionLabel}>{mention.label}</div>
|
||||
<img
|
||||
className={`
|
||||
univer-pointer-events-none univer-mr-1.5 univer-size-6 univer-flex-[0_0_auto]
|
||||
univer-rounded-md
|
||||
hover:univer-bg-gray-50
|
||||
`}
|
||||
src={mention.metadata?.icon as string}
|
||||
/>
|
||||
<div className="univer-pointer-events-none univer-flex-1 univer-truncate">{mention.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@univerjs/docs-quick-insert-ui",
|
||||
"version": "0.6.4",
|
||||
"version": "0.6.6",
|
||||
"private": false,
|
||||
"description": "",
|
||||
"author": "DreamNum <developer@univer.ai>",
|
||||
@@ -62,7 +62,7 @@
|
||||
"build": "univer-cli build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.9.0 || >=17 || >=18 || >=19",
|
||||
"react": ">=16.9.0",
|
||||
"rxjs": ">=7.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -70,23 +70,21 @@
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"@univerjs/docs-drawing": "workspace:*",
|
||||
"@univerjs/docs-drawing-ui": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/drawing": "workspace:*",
|
||||
"@univerjs/drawing-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"less": "^4.2.2",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "18.3.1",
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,7 +22,11 @@ export const KeywordInputPlaceholderComponentKey = 'docs.quick.insert.keyword-in
|
||||
export const KeywordInputPlaceholder = () => {
|
||||
const localeService = useDependency(LocaleService);
|
||||
// TODO: 需要根据fontSize来计算高度跟偏移
|
||||
return <div className="univer-translate-y-1.5 univer-text-sm univer-text-gray-500">{localeService.t('docQuickInsert.keywordInputPlaceholder')}</div>;
|
||||
return (
|
||||
<div className="univer-translate-y-1.5 univer-text-sm univer-text-gray-500">
|
||||
{localeService.t('docQuickInsert.keywordInputPlaceholder')}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
KeywordInputPlaceholder.componentKey = KeywordInputPlaceholderComponentKey;
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/thread-comment": "workspace:*",
|
||||
"@univerjs/thread-comment-ui": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
@@ -76,7 +76,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"@univerjs/drawing": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -87,13 +87,12 @@
|
||||
"@univerjs/docs-drawing": "workspace:*",
|
||||
"jest-canvas-mock": "^2.5.2",
|
||||
"jsdom": "^24.1.1",
|
||||
"less": "^4.2.2",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "18.3.1",
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
@font-size-xxxs: 10px;
|
||||
|
||||
.text-editor-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
user-select: none;
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
transition: all 0.15s;
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgb(var(--hyacinth-500));
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 1px solid rgb(var(--hyacinth-500));
|
||||
}
|
||||
|
||||
&-active {
|
||||
border: 1px solid rgb(var(--hyacinth-500));
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgb(var(--hyacinth-500));
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
border: 1px solid rgb(var(--red-400));
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgb(var(--red-400));
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
border-color: rgb(var(--grey-100));
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(var(--grey-100));
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
left: 5px;
|
||||
transform: translateY(-50%);
|
||||
color: rgb(var(--grey-400));
|
||||
font-size: var(--font-size-xs);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-editor-validation-error {
|
||||
// border: 1px solid rgb(var(--error-color));
|
||||
// background: rgb(var(--red-50));
|
||||
// border-radius: var(--border-radius-base);
|
||||
// padding: 2px 3px;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
font-size: @font-size-xxxs;
|
||||
color: rgb(var(--red-400));
|
||||
}
|
||||
@@ -17,11 +17,21 @@
|
||||
import type { IMenuSchema } from '@univerjs/ui';
|
||||
import { IMenuManagerService, MenuManagerPosition, ToolbarItem, useDependency } from '@univerjs/ui';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { SetInlineFormatBoldCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand } from '../../commands/commands/inline-format.command';
|
||||
import {
|
||||
SetInlineFormatBoldCommand,
|
||||
SetInlineFormatFontFamilyCommand,
|
||||
SetInlineFormatFontSizeCommand,
|
||||
SetInlineFormatItalicCommand,
|
||||
SetInlineFormatStrikethroughCommand,
|
||||
SetInlineFormatSubscriptCommand,
|
||||
SetInlineFormatSuperscriptCommand,
|
||||
SetInlineFormatTextBackgroundColorCommand,
|
||||
SetInlineFormatTextColorCommand,
|
||||
SetInlineFormatUnderlineCommand,
|
||||
} from '../../commands/commands/inline-format.command';
|
||||
|
||||
interface IFloatToolbarProps {
|
||||
avaliableMenus?: string[];
|
||||
|
||||
}
|
||||
|
||||
const DEFAULT_AVALIABLE_MENUS: string[] = [
|
||||
@@ -70,8 +80,8 @@ export function FloatToolbar(props: IFloatToolbarProps) {
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
univer-box-border univer-flex univer-rounded-xl univer-border univer-border-solid univer-border-gray-200
|
||||
univer-bg-white univer-p-2
|
||||
univer-box-border univer-flex univer-rounded univer-border univer-border-solid univer-border-gray-200
|
||||
univer-bg-white univer-py-1.5
|
||||
univer-shadow-[0_1px_6px_-2px_rgba(30,40,77,0.08),0_2px_6px_-1px_rgba(30,40,77,0.10)]
|
||||
`}
|
||||
>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
.doc-list-type-picker {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--padding-sm);
|
||||
width: 240px;
|
||||
margin-bottom: -var(--margin-xs);
|
||||
}
|
||||
|
||||
.doc-list-type-picker-item {
|
||||
width: 72px;
|
||||
height: 81px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
margin-bottom: var(--margin-xs);
|
||||
}
|
||||
|
||||
.doc-list-type-picker-item:hover {
|
||||
border: 1px solid rgb(var(--blue-400));
|
||||
}
|
||||
|
||||
.doc-list-type-picker-item-active {
|
||||
border: 1px solid rgb(var(--blue-400));
|
||||
}
|
||||
@@ -16,7 +16,6 @@
|
||||
|
||||
import { PresetListType } from '@univerjs/core';
|
||||
import { clsx } from '@univerjs/design';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export interface IListTypePickerBaseProps {
|
||||
value?: PresetListType;
|
||||
@@ -30,21 +29,28 @@ interface IListTypePickerProps extends IListTypePickerBaseProps {
|
||||
export const ListTypePicker = (props: IListTypePickerProps) => {
|
||||
const { value, onChange, options } = props;
|
||||
return (
|
||||
<div className={clsx(styles.docListTypePicker, 'univer-theme')}>
|
||||
<div className="univer-grid univer-grid-cols-3 univer-gap-2 univer-p-1.5">
|
||||
{options.map((item) => {
|
||||
return (
|
||||
<img
|
||||
<a
|
||||
key={item.value}
|
||||
className={styles.docListTypePickerItem + (value === item.value
|
||||
? `
|
||||
${styles.docListTypePickerItemActive}
|
||||
`
|
||||
: '')}
|
||||
className={clsx(`
|
||||
univer-block univer-h-20 univer-w-[72px] univer-cursor-pointer univer-overflow-hidden
|
||||
univer-rounded univer-border univer-border-solid univer-border-gray-200 univer-transition-all
|
||||
hover:univer-border-primary-500
|
||||
`, {
|
||||
'univer-border-primary-500': value === item.value,
|
||||
})}
|
||||
onClick={() => {
|
||||
onChange(item.value);
|
||||
}}
|
||||
src={item.img}
|
||||
/>
|
||||
>
|
||||
<img
|
||||
className="univer-size-full"
|
||||
src={item.img}
|
||||
draggable={false}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
|
||||
import type { LocaleType } from '@univerjs/core';
|
||||
import type { DocContainer } from '../views/doc-container/DocContainer';
|
||||
|
||||
import type { IUniverDocsUIConfig } from './config.schema';
|
||||
import { IConfigService, Inject, Injector, LocaleService } from '@univerjs/core';
|
||||
import { DOCS_UI_PLUGIN_CONFIG_KEY } from './config.schema';
|
||||
|
||||
@@ -15,8 +15,6 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import styles from './index.module.less';
|
||||
import { ZoomSlider } from './ZoomSlider';
|
||||
|
||||
interface ICountBarProps {
|
||||
@@ -24,9 +22,9 @@ interface ICountBarProps {
|
||||
onChange?: (value: string) => void;
|
||||
}
|
||||
|
||||
export function CountBar(props: ICountBarProps) {
|
||||
export function CountBar(_props: ICountBarProps) {
|
||||
return (
|
||||
<section className={styles.docCountBar}>
|
||||
<section className="univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-basis-[260px] univer-justify-end">
|
||||
<ZoomSlider />
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
.doc-count-bar {
|
||||
display: flex;
|
||||
flex: 0 0 260px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -14,10 +14,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
import type { IUniverDocsUIConfig } from '../../controllers/config.schema';
|
||||
|
||||
import React, { Component, createRef } from 'react';
|
||||
import style from './index.module.less';
|
||||
import { Component, createRef } from 'react';
|
||||
|
||||
interface IBaseDocContainerProps {
|
||||
config: IUniverDocsUIConfig;
|
||||
@@ -151,71 +150,4 @@ export class DocContainer extends Component<IBaseDocContainerProps> {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the component's HTML
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
override render() {
|
||||
const { methods } = this.props;
|
||||
const { layout } = this.props.config;
|
||||
const config = layout?.docContainerConfig!;
|
||||
// Set Provider for entire Container
|
||||
return (
|
||||
<section className={style.layoutContainer}>
|
||||
<div>
|
||||
<aside style={{ display: config.outerLeft ? 'block' : 'none' }} />
|
||||
<div className={style.mainContent} style={{ position: 'relative' }}>
|
||||
<div>
|
||||
<aside
|
||||
style={{
|
||||
display: config.innerLeft ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
{/* innerLeft */}
|
||||
</aside>
|
||||
<div
|
||||
className={config.contentSplit === 'vertical'
|
||||
? style.contentContainerVertical
|
||||
: style.contentContainerHorizontal}
|
||||
>
|
||||
{!!config.contentSplit && (
|
||||
<div ref={this.splitLeftRef} className={style.contentInnerLeftContainer}>
|
||||
<div className={style.hoverCursor} onMouseDown={this.handleSplitBarMouseDown} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
ref={this.contentRef}
|
||||
className={style.contentInnerRightContainer}
|
||||
/>
|
||||
{/* extend main content */}
|
||||
</div>
|
||||
|
||||
<aside
|
||||
style={{
|
||||
display: config.innerRight ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
{/* innerRight */}
|
||||
{/* <SideGroup></SideGroup> */}
|
||||
</aside>
|
||||
</div>
|
||||
<footer
|
||||
style={{
|
||||
display: config.footer ? 'block' : 'none',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<aside
|
||||
style={{
|
||||
display: config.outerRight ? 'block' : 'none',
|
||||
}}
|
||||
className={style.outerRightContainer}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
.layout-container {
|
||||
height: 100%;
|
||||
color: var(--text-color);
|
||||
// theme
|
||||
background-color: var(--bg);
|
||||
|
||||
.content-container-horizontal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 14em;
|
||||
|
||||
.content-inner-left-container {
|
||||
flex: none;
|
||||
// position: relative;
|
||||
width: 50%;
|
||||
padding-right: 10px;
|
||||
|
||||
.hover-cursor {
|
||||
cursor: e-resize;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
|
||||
background: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner-right-container {
|
||||
flex: 1;
|
||||
width: 50%;
|
||||
// position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container-vertical {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 14em;
|
||||
|
||||
.content-inner-left-container {
|
||||
flex: none;
|
||||
// position: relative;
|
||||
height: 50%;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.hover-cursor {
|
||||
cursor: n-resize;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
|
||||
background: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner-right-container {
|
||||
flex: 1;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.outer-right-container {
|
||||
// position: relative;
|
||||
flex: 0 0 280px;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* Copyright 2023-present DreamNum Co., Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './DocContainer';
|
||||
@@ -14,19 +14,21 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { CountBar } from '../count-bar';
|
||||
import styles from './index.module.less';
|
||||
import type { Workbook } from '@univerjs/core';
|
||||
import { IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
|
||||
import { useDependency, useObservable } from '@univerjs/ui';
|
||||
import { IUniverInstanceService, UniverInstanceType, type Workbook } from '@univerjs/core';
|
||||
import { CountBar } from '../count-bar';
|
||||
|
||||
export const DocFooter = () => {
|
||||
export function DocFooter() {
|
||||
const univerInstanceService = useDependency(IUniverInstanceService);
|
||||
const workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$<Workbook>(UniverInstanceType.UNIVER_SHEET), undefined, undefined, []);
|
||||
|
||||
return workbook ? null : (
|
||||
<div className={styles.docFooterContainer}>
|
||||
<div />
|
||||
<CountBar />
|
||||
</div>
|
||||
);
|
||||
return workbook
|
||||
? null
|
||||
: (
|
||||
<div className="univer-box-border univer-flex univer-items-center univer-justify-between univer-px-5">
|
||||
<div />
|
||||
<CountBar />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.doc-footer-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--padding-xl);
|
||||
}
|
||||
@@ -17,14 +17,13 @@
|
||||
import type { IDocumentStyle } from '@univerjs/core';
|
||||
import type { IHeaderFooterProps } from '../../../commands/commands/doc-header-footer.command';
|
||||
import { BooleanNumber, ICommandService, IUniverInstanceService, LocaleService, Tools } from '@univerjs/core';
|
||||
import { Button, Checkbox, clsx, InputNumber } from '@univerjs/design';
|
||||
import { Button, Checkbox, InputNumber } from '@univerjs/design';
|
||||
import { DocSkeletonManagerService } from '@univerjs/docs';
|
||||
import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
|
||||
import { ILayoutService, useDependency } from '@univerjs/ui';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CloseHeaderFooterCommand, CoreHeaderFooterCommandId } from '../../../commands/commands/doc-header-footer.command';
|
||||
import { DocSelectionRenderService } from '../../../services/selection/doc-selection-render.service';
|
||||
import styles from './index.module.less';
|
||||
|
||||
function getSegmentId(documentStyle: IDocumentStyle, editArea: DocumentEditArea, pageIndex: number): string {
|
||||
const { useFirstPageHeaderFooter, evenAndOddHeaders, defaultHeaderId, defaultFooterId, firstPageHeaderId, firstPageFooterId, evenPageHeaderId, evenPageFooterId } = documentStyle;
|
||||
@@ -203,9 +202,9 @@ export const DocHeaderFooterOptions = (props: IDocHeaderFooterOptionsProps) => {
|
||||
}, [unitId]);
|
||||
|
||||
return (
|
||||
<div className={styles.options}>
|
||||
<div className={styles.optionsSection}>
|
||||
<div className={styles.optionsFormItem}>
|
||||
<div className="univer-grid univer-gap-4">
|
||||
<div className="univer-grid univer-gap-2">
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={options.useFirstPageHeaderFooter === BooleanNumber.TRUE}
|
||||
onChange={(val) => { handleCheckboxChange(val as boolean, 'useFirstPageHeaderFooter'); }}
|
||||
@@ -213,7 +212,7 @@ export const DocHeaderFooterOptions = (props: IDocHeaderFooterOptionsProps) => {
|
||||
{localeService.t('headerFooter.firstPageCheckBox')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className={styles.optionsFormItem}>
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={options.evenAndOddHeaders === BooleanNumber.TRUE}
|
||||
onChange={(val) => { handleCheckboxChange(val as boolean, 'evenAndOddHeaders'); }}
|
||||
@@ -222,31 +221,33 @@ export const DocHeaderFooterOptions = (props: IDocHeaderFooterOptionsProps) => {
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.optionsSection, styles.optionsMarginSetting)}>
|
||||
<div className={styles.optionsMarginItem}>
|
||||
|
||||
<div className="univer-mb-1 univer-flex">
|
||||
<div>
|
||||
<span>{localeService.t('headerFooter.headerTopMargin')}</span>
|
||||
<InputNumber
|
||||
className="univer-mt-1.5 univer-w-4/5"
|
||||
min={0}
|
||||
max={200}
|
||||
precision={1}
|
||||
value={options.marginHeader}
|
||||
onChange={(val) => { handleMarginChange(val as number, 'marginHeader'); }}
|
||||
className={styles.optionsInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.optionsMarginItem}>
|
||||
<div>
|
||||
<span>{localeService.t('headerFooter.footerBottomMargin')}</span>
|
||||
<InputNumber
|
||||
className="univer-mt-1.5 univer-w-4/5"
|
||||
min={0}
|
||||
max={200}
|
||||
precision={1}
|
||||
value={options.marginFooter}
|
||||
onChange={(val) => { handleMarginChange(val as number, 'marginFooter'); }}
|
||||
className={styles.optionsInput}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.optionsSection}>
|
||||
|
||||
<div className="univer-flex univer-justify-end">
|
||||
<Button onClick={closeHeaderFooter}>{localeService.t('headerFooter.closeHeaderFooter')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,10 +18,8 @@ import { IUniverInstanceService, LocaleService } from '@univerjs/core';
|
||||
import { DocSkeletonManagerService } from '@univerjs/docs';
|
||||
import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
|
||||
import { useDependency } from '@univerjs/ui';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DocHeaderFooterOptions } from './DocHeaderFooterOptions';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export const DocHeaderFooterPanel = () => {
|
||||
const localeService = useDependency(LocaleService);
|
||||
@@ -48,14 +46,13 @@ export const DocHeaderFooterPanel = () => {
|
||||
return () => {
|
||||
subscription.unsubscribe();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.panel}>
|
||||
<div className="univer-text-sm">
|
||||
{isEditHeaderFooter
|
||||
? <DocHeaderFooterOptions unitId={unitId} />
|
||||
: <div className={styles.panelDisableText}>{localeService.t('headerFooter.disableText')}</div>}
|
||||
: <div className="univer-text-gray-400">{localeService.t('headerFooter.disableText')}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
.panel {
|
||||
padding-top: 20px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.options {
|
||||
&-section {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
&-form-item {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 80%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&-margin-setting {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -30,7 +30,6 @@ import {
|
||||
useFirstParagraphLineSpacing,
|
||||
useFirstParagraphSpaceBelow,
|
||||
} from './hook/utils';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const AutoFocusInputNumber = (props: {
|
||||
value: number;
|
||||
@@ -94,20 +93,25 @@ export function ParagraphSetting() {
|
||||
}, [spacingRule, lineSpacing]);
|
||||
|
||||
return (
|
||||
<div className={styles.paragraphSetting}>
|
||||
<div className={styles.paragraphSettingTitle}>{localeService.t('doc.paragraphSetting.alignment')}</div>
|
||||
<div>
|
||||
<div className="univer-t-4 univer-text-[13px] univer-font-medium">{localeService.t('doc.paragraphSetting.alignment')}</div>
|
||||
<div
|
||||
className={`
|
||||
${styles.paragraphSettingIconList}
|
||||
${styles.paragraphSettingMtBase}
|
||||
univer-mt-4 univer-box-border univer-flex univer-w-full univer-items-center univer-justify-between
|
||||
univer-gap-1 univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-p-1
|
||||
`}
|
||||
>
|
||||
{alignmentOptions.map((item) => {
|
||||
return (
|
||||
<Tooltip title={item.label} key={item.value} placement="bottom">
|
||||
<span
|
||||
className={clsx(styles.paragraphSettingIconListItem, { [styles.paragraphSettingIconListActive]: horizontalAlignValue === item.value })}
|
||||
|
||||
className={clsx(`
|
||||
univer-flex univer-cursor-pointer univer-items-center univer-justify-center
|
||||
univer-rounded univer-bg-none univer-px-3 univer-py-1
|
||||
hover:univer-bg-black/60
|
||||
`, {
|
||||
'univer-bg-blend-color-dodge/90': horizontalAlignValue === item.value,
|
||||
})}
|
||||
onClick={() => horizontalAlignSet(item.value)}
|
||||
>
|
||||
{item.icon}
|
||||
@@ -117,65 +121,62 @@ export function ParagraphSetting() {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.paragraphSettingTitle}>{localeService.t('doc.paragraphSetting.indentation')}</div>
|
||||
<div className="univer-t-4 univer-text-[13px] univer-font-medium">{localeService.t('doc.paragraphSetting.indentation')}</div>
|
||||
<div>
|
||||
<div className={styles.paragraphSettingFlexCol}>
|
||||
<div className={styles.paragraphSettingLabel}>
|
||||
<div className="univer-flex univer-justify-between univer-item-center">
|
||||
<div className="univer-mt-3 univer-text-xs">
|
||||
{localeService.t('doc.paragraphSetting.left')}
|
||||
(px)
|
||||
</div>
|
||||
<AutoFocusInputNumber className={styles.paragraphSettingMtBase} value={indentStart} onChange={(v) => indentStartSet(v ?? 0)} />
|
||||
<AutoFocusInputNumber className="univer-mt-4" value={indentStart} onChange={(v) => indentStartSet(v ?? 0)} />
|
||||
</div>
|
||||
<div className={styles.paragraphSettingFlexCol}>
|
||||
<div className="univer-flex univer-justify-between univer-item-center">
|
||||
|
||||
<div className={styles.paragraphSettingLabel}>
|
||||
<div className="univer-mt-3 univer-text-xs">
|
||||
{localeService.t('doc.paragraphSetting.right')}
|
||||
(px)
|
||||
</div>
|
||||
<AutoFocusInputNumber className={styles.paragraphSettingMtBase} value={indentEnd} onChange={(v) => indentEndSet(v ?? 0)} />
|
||||
<AutoFocusInputNumber className="univer-mt-4" value={indentEnd} onChange={(v) => indentEndSet(v ?? 0)} />
|
||||
</div>
|
||||
<div className={styles.paragraphSettingFlexCol}>
|
||||
<div className="univer-flex univer-justify-between univer-item-center">
|
||||
|
||||
<div className={styles.paragraphSettingLabel}>
|
||||
<div className="univer-mt-3 univer-text-xs">
|
||||
{localeService.t('doc.paragraphSetting.firstLine')}
|
||||
(px)
|
||||
</div>
|
||||
<AutoFocusInputNumber className={styles.paragraphSettingMtBase} value={indentFirstLine} onChange={(v) => indentFirstLineSet(v ?? 0)} />
|
||||
<AutoFocusInputNumber className="univer-mt-4" value={indentFirstLine} onChange={(v) => indentFirstLineSet(v ?? 0)} />
|
||||
</div>
|
||||
<div className={styles.paragraphSettingFlexCol}>
|
||||
<div className="univer-flex univer-justify-between univer-item-center">
|
||||
|
||||
<div className={styles.paragraphSettingLabel}>
|
||||
<div className="univer-mt-3 univer-text-xs">
|
||||
{localeService.t('doc.paragraphSetting.hanging')}
|
||||
(px)
|
||||
</div>
|
||||
<AutoFocusInputNumber className={styles.paragraphSettingMtBase} value={hanging} onChange={(v) => hangingSet(v ?? 0)} />
|
||||
<AutoFocusInputNumber className="univer-mt-4" value={hanging} onChange={(v) => hangingSet(v ?? 0)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.paragraphSettingTitle}>{localeService.t('doc.paragraphSetting.spacing')}</div>
|
||||
<div className="univer-t-4 univer-text-[13px] univer-font-medium">{localeService.t('doc.paragraphSetting.spacing')}</div>
|
||||
<div>
|
||||
<div className={styles.paragraphSettingFlexCol}>
|
||||
<div className="univer-flex univer-justify-betweenuniver-item-center">
|
||||
|
||||
<div className={styles.paragraphSettingLabel}>
|
||||
<div className="univer-mt-3 univer-text-xs">
|
||||
{localeService.t('doc.paragraphSetting.before')}
|
||||
(px)
|
||||
</div>
|
||||
<AutoFocusInputNumber className={styles.paragraphSettingMtBase} value={spaceAbove} onChange={(v) => spaceAboveSet(v ?? 0)} />
|
||||
<AutoFocusInputNumber className="univer-mt-4" value={spaceAbove} onChange={(v) => spaceAboveSet(v ?? 0)} />
|
||||
</div>
|
||||
<div className={styles.paragraphSettingFlexCol}>
|
||||
<div className="univer-flex univer-justify-between univer-item-center">
|
||||
|
||||
<div className={styles.paragraphSettingLabel}>
|
||||
<div className="univer-mt-3 univer-text-xs">
|
||||
{localeService.t('doc.paragraphSetting.after')}
|
||||
(px)
|
||||
</div>
|
||||
<AutoFocusInputNumber className={styles.paragraphSettingMtBase} value={spaceBelow} onChange={(v) => spaceBelowSet(v ?? 0)} />
|
||||
<AutoFocusInputNumber className="univer-mt-4" value={spaceBelow} onChange={(v) => spaceBelowSet(v ?? 0)} />
|
||||
</div>
|
||||
<div className={styles.paragraphSettingFlexCol}>
|
||||
<div className={styles.paragraphSettingLabel}>{localeService.t('doc.paragraphSetting.lineSpace')}</div>
|
||||
<div className="univer-flex univer-justify-between item-center">
|
||||
<div className="univer-mt-3 univer-text-xs">{localeService.t('doc.paragraphSetting.lineSpace')}</div>
|
||||
<div
|
||||
className={`
|
||||
${styles.paragraphSettingMtBase}
|
||||
${styles.paragraphSettingSpaceLine}
|
||||
`}
|
||||
className="univer-mt-4 univer-flex univer-flex-col univer-gap-1.5"
|
||||
style={{ width: 162 }}
|
||||
>
|
||||
<Select
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
.paragraph-setting {
|
||||
&-icon-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(---Grey-200, #e5e5e5);
|
||||
border-radius: var(--radius-m, 6px);
|
||||
|
||||
&-item {
|
||||
padding: 4px 14px;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--black-6, rgba(30, 34, 43, 0.06));
|
||||
}
|
||||
}
|
||||
|
||||
&-item&-active {
|
||||
background: var(--black-9, rgba(30, 34, 43, 0.09));
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: var(--margin-base);
|
||||
font-size: 13px;
|
||||
color: #1e222b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-label {
|
||||
font-size: 12px;
|
||||
margin-top: var(--margin-sm);
|
||||
color: #1e222b;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&-mt-base {
|
||||
margin-top: var(--margin-base);
|
||||
}
|
||||
|
||||
&-flex-col {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-space-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
.rich-text-editor {
|
||||
&-active {
|
||||
border-color: rgb(var(--hyacinth-500)) !important;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
height: 32px;
|
||||
padding: 6px 8px 2px 6px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-base);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.rich-text-editor-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rich-text-editor-error-wrap {
|
||||
font-size: 12px;
|
||||
color: rgb(var(--red-500));
|
||||
position: absolute;
|
||||
bottom: -18px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
font-size: 14px;
|
||||
color: rgb(var(--grey-500));
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
@@ -30,7 +30,6 @@ import { useKeyboardEvent, useResize } from './hooks';
|
||||
import { useEditor } from './hooks/use-editor';
|
||||
import { useLeftAndRightArrow } from './hooks/use-left-and-right-arrow';
|
||||
import { useOnChange } from './hooks/use-on-change';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export interface IRichTextEditorProps {
|
||||
className?: string;
|
||||
@@ -70,6 +69,7 @@ export const RichTextEditor = (props: IRichTextEditorProps) => {
|
||||
maxHeight = 32,
|
||||
icon,
|
||||
editorRef,
|
||||
placeholder,
|
||||
} = props;
|
||||
const editorService = useDependency(IEditorService);
|
||||
const onFocusChange = useEvent(_onFocusChange);
|
||||
@@ -157,25 +157,33 @@ export const RichTextEditor = (props: IRichTextEditorProps) => {
|
||||
useOnChange(editor, onChange);
|
||||
|
||||
return (
|
||||
<div className={clsx(styles.richTextEditor, className)} style={style}>
|
||||
<div className={className} style={style}>
|
||||
<div
|
||||
className={clsx(styles.richTextEditorWrap, {
|
||||
[styles.richTextEditorActive]: isFocusing,
|
||||
className={clsx(`
|
||||
univer-relative univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center
|
||||
univer-justify-around univer-gap-2 univer-rounded univer-border univer-border-solid
|
||||
univer-border-gray-200 univer-pb-0.5 univer-pl-1.5 univer-pr-2 univer-pt-1.5
|
||||
`, {
|
||||
'univer-border-primary-500': isFocusing,
|
||||
})}
|
||||
style={{ height }}
|
||||
ref={sheetEmbeddingRef}
|
||||
>
|
||||
<div
|
||||
className={styles.richTextEditorText}
|
||||
ref={formulaEditorContainerRef}
|
||||
className="univer-relative univer-size-full"
|
||||
onMouseUp={() => editor?.focus()}
|
||||
/>
|
||||
{icon}
|
||||
{!showPlaceholder
|
||||
? null
|
||||
: (
|
||||
<div className={styles.richTextEditorPlaceholder}>
|
||||
{props.placeholder}
|
||||
<div
|
||||
className={`
|
||||
univer-absolute univer-left-[5px] univer-top-[5px] univer-text-sm univer-text-gray-500
|
||||
`}
|
||||
>
|
||||
{placeholder}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -18,8 +18,7 @@ import { LocaleService } from '@univerjs/core';
|
||||
import { InputNumber } from '@univerjs/design';
|
||||
import { useDependency } from '@univerjs/ui';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styles from './index.module.less';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface IDocCreateTableConfirmProps {
|
||||
handleRowColChange: (rowCount: number, colCount: number) => void;
|
||||
@@ -50,27 +49,27 @@ export const DocCreateTableConfirm = ({
|
||||
}, [tableCreateParams]);
|
||||
|
||||
return (
|
||||
<div className={styles.create}>
|
||||
<div className={styles.createItem}>
|
||||
<span className={styles.createLabel}>{localeService.t('toolbar.table.rowCount')}</span>
|
||||
<div className="univer-flex univer-items-center univer-justify-between">
|
||||
<div className="univer-flex univer-items-center univer-gap-2">
|
||||
<span>{localeService.t('toolbar.table.rowCount')}</span>
|
||||
<InputNumber
|
||||
className="univer-w-28"
|
||||
min={1}
|
||||
max={20}
|
||||
precision={0}
|
||||
value={rowCount}
|
||||
onChange={(val) => { handleInputChange(val as number, colCount); }}
|
||||
className={styles.createInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.createItem}>
|
||||
<span className={styles.createLabel}>{localeService.t('toolbar.table.colCount')}</span>
|
||||
<div className="univer-flex univer-items-center univer-gap-2">
|
||||
<span>{localeService.t('toolbar.table.colCount')}</span>
|
||||
<InputNumber
|
||||
className="univer-w-28"
|
||||
min={1}
|
||||
max={20}
|
||||
precision={0}
|
||||
value={colCount}
|
||||
onChange={(val) => { handleInputChange(rowCount, val as number); }}
|
||||
className={styles.createInput}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
.create {
|
||||
padding: 20px auto;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
@@ -68,7 +68,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/drawing": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -81,7 +81,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,10 +61,10 @@
|
||||
"rxjs": ">=7.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.11",
|
||||
"@floating-ui/utils": "^0.2.8",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@floating-ui/utils": "^0.2.9",
|
||||
"@univerjs/core": "workspace:*",
|
||||
"cjk-regex": "^3.1.0",
|
||||
"cjk-regex": "^3.3.0",
|
||||
"franc-min": "^6.2.0",
|
||||
"opentype.js": "^1.3.4"
|
||||
},
|
||||
@@ -73,8 +73,8 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
},
|
||||
"browser": {
|
||||
"fs": false
|
||||
|
||||
@@ -71,18 +71,17 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"less": "^4.2.2",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "18.3.1",
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
.find-replace {
|
||||
&-dialog-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-expand-container {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
|
||||
.button-text {
|
||||
color: rgb(var(--primary-color));
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
|
||||
&-right {
|
||||
> button {
|
||||
&:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,15 +19,12 @@ import type { ForwardedRef } from 'react';
|
||||
import { ICommandService, IContextService, LocaleService } from '@univerjs/core';
|
||||
import { Button, Checkbox, FormDualColumnLayout, FormLayout, Input, MessageType, Select } from '@univerjs/design';
|
||||
import { ILayoutService, IMessageService, useDependency, useObservable } from '@univerjs/ui';
|
||||
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
|
||||
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
|
||||
import { fromEvent } from 'rxjs';
|
||||
|
||||
import { ReplaceAllMatchesCommand, ReplaceCurrentMatchCommand } from '../../commands/commands/replace.command';
|
||||
import { OpenReplaceDialogOperation } from '../../commands/operations/find-replace.operation';
|
||||
import { FIND_REPLACE_DIALOG_FOCUS, FIND_REPLACE_INPUT_FOCUS } from '../../services/context-keys';
|
||||
import { FindBy, FindDirection, FindScope, IFindReplaceService } from '../../services/find-replace.service';
|
||||
import styles from './FindReplaceDialog.module.less';
|
||||
|
||||
import { SearchInput } from './SearchInput';
|
||||
|
||||
interface ISubFormRef {
|
||||
@@ -83,10 +80,16 @@ export const FindDialog = forwardRef(function FindDialogImpl(_props, ref) {
|
||||
findString={findString}
|
||||
onChange={onFindStringChange}
|
||||
/>
|
||||
<div className={styles.findReplaceExpandContainer}>
|
||||
<Button type="text" size="small" onClick={revealReplace}>
|
||||
<div className="univer-mt-4 univer-text-center">
|
||||
<a
|
||||
className={`
|
||||
univer-cursor-pointer univer-text-sm univer-text-primary-500 univer-transition-colors
|
||||
hover:univer-text-primary-500/80
|
||||
`}
|
||||
onClick={revealReplace}
|
||||
>
|
||||
{localeService.t('find-replace.dialog.advanced-finding')}
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -228,9 +231,9 @@ export const ReplaceDialog = forwardRef(function ReplaceDIalogImpl(_props, ref)
|
||||
</FormLayout>
|
||||
</>
|
||||
</FormDualColumnLayout>
|
||||
<div className={styles.findReplaceButtonsGroup}>
|
||||
<div className="univer-mt-6 univer-flex univer-justify-between">
|
||||
<Button type="primary" onClick={onClickFindButton} disabled={findDisabled}>{localeService.t('find-replace.dialog.find')}</Button>
|
||||
<span className={styles.findReplaceButtonsGroupRight}>
|
||||
<span className="univer-inline-flex univer-gap-2">
|
||||
<Button disabled={replaceDisabled} onClick={onClickReplaceButton}>{localeService.t('find-replace.dialog.replace')}</Button>
|
||||
<Button disabled={replaceAllDisabled} onClick={onClickReplaceAllButton}>{localeService.t('find-replace.dialog.replace-all')}</Button>
|
||||
</span>
|
||||
@@ -294,7 +297,7 @@ export function FindReplaceDialog() {
|
||||
}, [setDialogContainerFocus, setDialogInputFocus]);
|
||||
|
||||
return (
|
||||
<div className={styles.findReplaceDialogContainer} ref={dialogContainerRef}>
|
||||
<div ref={dialogContainerRef}>
|
||||
{!state.replaceRevealed ? <FindDialog ref={focusRef} /> : <ReplaceDialog ref={focusRef} />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-conditional-formatting": "workspace:*",
|
||||
"@univerjs/sheets-formula-ui": "workspace:*",
|
||||
@@ -91,7 +91,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,10 +75,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"@univerjs/icons-svg": "^0.2.22",
|
||||
"@univerjs/icons-svg": "^0.2.27",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
@@ -87,7 +87,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-data-validation": "workspace:*",
|
||||
"@univerjs/sheets-formula-ui": "workspace:*",
|
||||
@@ -92,7 +92,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
"less": "^4.2.2",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
"@univerjs/drawing": "workspace:*",
|
||||
"@univerjs/drawing-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-drawing": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
@@ -93,7 +93,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/rpc": "workspace:*",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-filter": "workspace:*",
|
||||
@@ -85,7 +85,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
import type { ByValuesModel, IFilterByValueWithTreeItem } from '../../services/sheets-filter-panel.service';
|
||||
import { LocaleService } from '@univerjs/core';
|
||||
import { Button, Checkbox, Input, Tree } from '@univerjs/design';
|
||||
import { Checkbox, Input, Tree } from '@univerjs/design';
|
||||
import { useDependency, useObservable } from '@univerjs/ui';
|
||||
import React, { useCallback } from 'react';
|
||||
import { statisticFilterByValueItems } from '../../models/utils';
|
||||
@@ -63,8 +63,18 @@ export function FilterByValue(props: { model: ByValuesModel }) {
|
||||
|
||||
return (
|
||||
<div className={styles.sheetsFilterPanelValuesContainer}>
|
||||
<Input autoFocus value={searchText} placeholder={localeService.t('sheets-filter.panel.search-placeholder')} onChange={onSearchValueChange} />
|
||||
<div className={styles.sheetsFilterPanelValuesList}>
|
||||
<Input
|
||||
autoFocus
|
||||
value={searchText}
|
||||
placeholder={localeService.t('sheets-filter.panel.search-placeholder')}
|
||||
onChange={onSearchValueChange}
|
||||
/>
|
||||
<div
|
||||
className={`
|
||||
univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden
|
||||
univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-px-2 univer-py-2.5
|
||||
`}
|
||||
>
|
||||
{/* The on-top select all button */}
|
||||
<div className={styles.sheetsFilterPanelValuesItem}>
|
||||
<div className={styles.sheetsFilterPanelValuesItemInner}>
|
||||
@@ -74,8 +84,12 @@ export function FilterByValue(props: { model: ByValuesModel }) {
|
||||
checked={allChecked}
|
||||
onChange={onCheckAllToggled}
|
||||
/>
|
||||
<span className={styles.sheetsFilterPanelValuesItemText}>{`${localeService.t('sheets-filter.panel.select-all')}`}</span>
|
||||
<span className={styles.sheetsFilterPanelValuesItemCount}>{`(${stat.checked}/${stat.checked + stat.unchecked})`}</span>
|
||||
<span className={styles.sheetsFilterPanelValuesItemText}>
|
||||
{`${localeService.t('sheets-filter.panel.select-all')}`}
|
||||
</span>
|
||||
<span className={styles.sheetsFilterPanelValuesItemCount}>
|
||||
{`(${stat.checked}/${stat.checked + stat.unchecked})`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.sheetsFilterPanelValuesVirtual}>
|
||||
@@ -89,15 +103,21 @@ export function FilterByValue(props: { model: ByValuesModel }) {
|
||||
}}
|
||||
defaultCache={treeMap}
|
||||
itemHeight={28}
|
||||
treeNodeClassName={styles.sheetsFilterTreeNode}
|
||||
treeNodeClassName={`
|
||||
univer-pr-2 univer-border-box univer-max-w-[245px] univer-rounded-md
|
||||
[&:hover_a]:univer-inline-block
|
||||
hover:univer-bg-gray-50 univer-h-full
|
||||
`}
|
||||
attachRender={(item) => (
|
||||
<div className={styles.sheetsFilterTreeNodeAttach}>
|
||||
<div
|
||||
className={`
|
||||
univer-ml-1 univer-flex univer-h-5 univer-flex-1 univer-cursor-pointer
|
||||
univer-items-center univer-justify-between univer-text-[13px] univer-text-primary-500
|
||||
`}
|
||||
>
|
||||
<span className={styles.sheetsFilterPanelValuesItemCount}>{`(${item.count})`}</span>
|
||||
<Button
|
||||
className={styles.sheetsFilterTreeNodeFilterOnly}
|
||||
|
||||
size="small"
|
||||
type="link"
|
||||
<a
|
||||
className="univer-box-border univer-hidden univer-h-4 univer-px-1.5"
|
||||
onClick={() => {
|
||||
const filterValues = [];
|
||||
if (item.children) {
|
||||
@@ -117,7 +137,7 @@ export function FilterByValue(props: { model: ByValuesModel }) {
|
||||
}}
|
||||
>
|
||||
{filterOnly}
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -19,9 +19,8 @@ import { ICommandService, LocaleService } from '@univerjs/core';
|
||||
import { Button, Segmented } from '@univerjs/design';
|
||||
import { SheetsFilterService } from '@univerjs/sheets-filter';
|
||||
import { SheetsUIPart } from '@univerjs/sheets-ui';
|
||||
|
||||
import { ComponentContainer, useComponentsOfPart, useDependency, useObservable } from '@univerjs/ui';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { of } from 'rxjs';
|
||||
import { ChangeFilterByOperation, CloseFilterPanelOperation } from '../../commands/operations/sheets-filter.operation';
|
||||
import { FilterBy, SheetsFilterPanelService } from '../../services/sheets-filter-panel.service';
|
||||
|
||||
@@ -55,23 +55,6 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&-list {
|
||||
flex-grow: 1;
|
||||
margin-top: 8px;
|
||||
border: 1px solid rgb(var(--grey-200));
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 6px 0 6px 8px;
|
||||
|
||||
&-inner-container {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-virtual {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -199,37 +182,3 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.sheets-filter {
|
||||
&-tree-node {
|
||||
// height: 28px;
|
||||
padding-right: 8px;
|
||||
max-width: 245px;
|
||||
|
||||
.sheets-filter-tree-node-filter-only {
|
||||
display: none;
|
||||
padding: 0 6px;
|
||||
height: 16px;
|
||||
background-color: rgb(var(--grey-50));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(var(--grey-50));
|
||||
border-radius: 6px;
|
||||
|
||||
.sheets-filter-tree-node-filter-only {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&-attach {
|
||||
height: 20px;
|
||||
flex: 1;
|
||||
margin-left: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-formula": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
@@ -93,7 +93,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-data-validation": "workspace:*",
|
||||
"@univerjs/sheets-formula-ui": "workspace:*",
|
||||
@@ -95,7 +95,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/engine-numfmt": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-numfmt": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
@@ -87,7 +87,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-sort": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
@@ -83,7 +83,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-thread-comment": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
@@ -84,7 +84,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
"@univerjs/engine-formula": "workspace:*",
|
||||
"@univerjs/engine-numfmt": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/protocol": "0.1.44",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/telemetry": "workspace:*",
|
||||
@@ -95,7 +95,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -182,7 +182,8 @@ export const AutoFillPopupMenu: React.FC<{}> = () => {
|
||||
return (
|
||||
<div className="univer-absolute univer-inset-0 univer-z-10 univer-size-0">
|
||||
<div
|
||||
style={{ left: `${relativeX + 2}px`, top: `${relativeY + 2}px`, position: 'absolute' }}
|
||||
className="univer-absolute"
|
||||
style={{ left: `${relativeX + 2}px`, top: `${relativeY + 2}px` }}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
"@univerjs/docs": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
@@ -92,7 +92,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
"@univerjs/network": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/drawing": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/slides": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
@@ -86,7 +86,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/docs-ui": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@univerjs/thread-comment": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*"
|
||||
},
|
||||
@@ -81,7 +81,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8"
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
"@univerjs/core": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@univerjs/engine-render": "workspace:*",
|
||||
"@univerjs/icons": "^0.2.22",
|
||||
"@univerjs/icons": "^0.2.27",
|
||||
"@wendellhu/redi": "0.17.1",
|
||||
"localforage": "^1.10.0",
|
||||
"rc-notification": "^5.6.2"
|
||||
@@ -97,8 +97,8 @@
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.1",
|
||||
"vitest": "^3.0.8",
|
||||
"vite": "^6.2.2",
|
||||
"vitest": "^3.0.9",
|
||||
"vue": "^3.5.13"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,10 +16,9 @@
|
||||
|
||||
import type { IFontFamilyProps } from './interface';
|
||||
import { LocaleService } from '@univerjs/core';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { useDependency } from '../../utils/di';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export const FontFamily = (props: IFontFamilyProps) => {
|
||||
const { value } = props;
|
||||
@@ -36,11 +35,13 @@ export const FontFamily = (props: IFontFamilyProps) => {
|
||||
}
|
||||
|
||||
return fontFamily;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<div className={styles.uiPluginSheetsFontFamily} style={{ fontFamily: value as string }}>
|
||||
<div
|
||||
className="univer-w-32 univer-overflow-hidden univer-truncate univer-text-[13px]"
|
||||
style={{ fontFamily: value as string }}
|
||||
>
|
||||
{viewValue}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -16,10 +16,7 @@
|
||||
|
||||
import type { IFontFamilyItemProps } from './interface';
|
||||
import { LocaleService } from '@univerjs/core';
|
||||
import React from 'react';
|
||||
|
||||
import { useDependency } from '../../utils/di';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export const FontFamilyItem = (props: IFontFamilyItemProps) => {
|
||||
const { value } = props;
|
||||
@@ -27,7 +24,7 @@ export const FontFamilyItem = (props: IFontFamilyItemProps) => {
|
||||
const localeService = useDependency(LocaleService);
|
||||
|
||||
return (
|
||||
<span className={styles.uiPluginSheetsFontFamilyItem} style={{ fontFamily: value }}>
|
||||
<span className="univer-text-[13px]" style={{ fontFamily: value }}>
|
||||
{localeService.t(`fontFamily.${(`${value ?? ''}`).replace(/\s/g, '')}`)}
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
.ui-plugin-sheets-font-family {
|
||||
overflow: hidden;
|
||||
|
||||
width: 120px;
|
||||
|
||||
font-size: var(--font-size-xs);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-plugin-sheets-font-family-item {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user