mirror of
https://github.com/dream-num/univer.git
synced 2026-09-21 05:44:04 +08:00
refactor(*): migrate styles from LESS to Tailwind CSS (#5137)
This commit is contained in:
白熱
Vendored
-1
@@ -198,7 +198,6 @@
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"toml",
|
||||
"less",
|
||||
"css"
|
||||
],
|
||||
|
||||
|
||||
@@ -24,10 +24,11 @@
|
||||
"univer-cli": "bin/index.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@typescript-eslint/parser": "^8.31.1",
|
||||
"@typescript-eslint/parser": "^8.32.0",
|
||||
"@univerjs/themes": "workspace:*",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vitest/coverage-istanbul": "^3.1.2",
|
||||
"@vitest/coverage-istanbul": "^3.1.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint-plugin-readable-tailwind": "^1.9.1",
|
||||
"fs-extra": "^11.3.0",
|
||||
@@ -35,13 +36,13 @@
|
||||
"javascript-obfuscator": "^4.1.1",
|
||||
"postcss-preset-env": "^10.1.6",
|
||||
"sort-keys": "^5.1.0",
|
||||
"tailwind-scrollbar": "^3.1.0",
|
||||
"tailwind-scrollbar": "^4.0.2",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss-rem-to-px": "^0.1.1",
|
||||
"vite": "^6.3.4",
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-dts": "^4.5.3",
|
||||
"vite-plugin-external": "^6.2.1",
|
||||
"vitest": "^3.1.2"
|
||||
"vitest": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
*/
|
||||
|
||||
import type { Config } from 'tailwindcss';
|
||||
import { defaultTheme } from '@univerjs/themes';
|
||||
import scrollbar from 'tailwind-scrollbar';
|
||||
import remToPx from 'tailwindcss-rem-to-px';
|
||||
|
||||
@@ -26,140 +27,7 @@ const config: Omit<Config, 'content'> = {
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#F3F5FF',
|
||||
100: '#E9EDFF',
|
||||
200: '#D2DAFA',
|
||||
300: '#BAC6F8',
|
||||
400: '#6280F9',
|
||||
500: '#466AF7',
|
||||
600: '#2C53F1',
|
||||
700: '#143EE3',
|
||||
800: '#083AD1',
|
||||
900: '#1033BF',
|
||||
},
|
||||
gray: {
|
||||
50: '#F9FAFB',
|
||||
100: '#EEEFF1',
|
||||
200: '#E3E5EA',
|
||||
300: '#A8B0BD',
|
||||
400: '#7D8698',
|
||||
500: '#4E5565',
|
||||
600: '#31363F',
|
||||
700: '#272A2F',
|
||||
800: '#1F2124',
|
||||
900: '#1B1C1F',
|
||||
},
|
||||
blue: {
|
||||
50: '#EBF5FF',
|
||||
100: '#E1EFFE',
|
||||
200: '#C3DDFD',
|
||||
300: '#A4CAFE',
|
||||
400: '#76A9FA',
|
||||
500: '#3F83F8',
|
||||
600: '#1C64F2',
|
||||
700: '#1A56DB',
|
||||
800: '#1E429F',
|
||||
900: '#233876',
|
||||
},
|
||||
red: {
|
||||
50: '#FDF2F2',
|
||||
100: '#FDE8E8',
|
||||
200: '#FBD5D5',
|
||||
300: '#F8B4B4',
|
||||
400: '#F98080',
|
||||
500: '#F05252',
|
||||
600: '#E02424',
|
||||
700: '#C81E1E',
|
||||
800: '#9B1C1C',
|
||||
900: '#771D1D',
|
||||
},
|
||||
orange: {
|
||||
50: '#FFF8F1',
|
||||
100: '#FEECDC',
|
||||
200: '#FCD9BD',
|
||||
300: '#FDBA8C',
|
||||
400: '#FF8A4C',
|
||||
500: '#FF5A1F',
|
||||
600: '#D03801',
|
||||
700: '#B43403',
|
||||
800: '#8A2C0D',
|
||||
900: '#771D1D',
|
||||
},
|
||||
yellow: {
|
||||
50: '#FDFCEA',
|
||||
100: '#FFF4B9',
|
||||
200: '#FCDC6A',
|
||||
300: '#FAC815',
|
||||
400: '#F1B312',
|
||||
500: '#D49D0F',
|
||||
600: '#AB7F0E',
|
||||
700: '#9A6D15',
|
||||
800: '#725213',
|
||||
900: '#634312',
|
||||
},
|
||||
green: {
|
||||
50: '#F3FAF7',
|
||||
100: '#DEF7EC',
|
||||
200: '#BCF0DA',
|
||||
300: '#84E1BC',
|
||||
400: '#31C48D',
|
||||
500: '#0DA471',
|
||||
600: '#057A55',
|
||||
700: '#046C4E',
|
||||
800: '#03543F',
|
||||
900: '#014737',
|
||||
},
|
||||
jiqing: {
|
||||
50: '#EDFAFA',
|
||||
100: '#D5F5F6',
|
||||
200: '#AFECEF',
|
||||
300: '#7EDCE2',
|
||||
400: '#16BDCA',
|
||||
500: '#0694A2',
|
||||
600: '#047481',
|
||||
700: '#036672',
|
||||
800: '#05505C',
|
||||
900: '#014451',
|
||||
},
|
||||
indigo: {
|
||||
50: '#F3F5FF',
|
||||
100: '#E9EDFF',
|
||||
200: '#D2DAFA',
|
||||
300: '#BAC6F8',
|
||||
400: '#6280F9',
|
||||
500: '#466AF7',
|
||||
600: '#2C53F1',
|
||||
700: '#143EE3',
|
||||
800: '#083AD1',
|
||||
900: '#1033BF',
|
||||
},
|
||||
purple: {
|
||||
50: '#F6F5FF',
|
||||
100: '#EDEBFE',
|
||||
200: '#DCD7FE',
|
||||
300: '#CABFFD',
|
||||
400: '#AC94FA',
|
||||
500: '#9061F9',
|
||||
600: '#7E3AF2',
|
||||
700: '#6C2BD9',
|
||||
800: '#5521B5',
|
||||
900: '#4A1D96',
|
||||
},
|
||||
pink: {
|
||||
50: '#FDF2F8',
|
||||
100: '#FCE8F3',
|
||||
200: '#FAD1E8',
|
||||
300: '#F8B4D9',
|
||||
400: '#F17EB8',
|
||||
500: '#E74694',
|
||||
600: '#D61F69',
|
||||
700: '#BF125D',
|
||||
800: '#99154B',
|
||||
900: '#751A3D',
|
||||
},
|
||||
},
|
||||
colors: defaultTheme,
|
||||
boxShadow: {
|
||||
sm: '0px 1px 2px 0px rgba(30, 40, 77, 0.08)',
|
||||
md: '0px 1px 6px -2px rgba(30, 40, 77, 0.08), 0px 2px 6px -1px rgba(30, 40, 77, 0.10)',
|
||||
|
||||
@@ -40,7 +40,7 @@ import {
|
||||
ThemeService,
|
||||
UniverInstanceService,
|
||||
} from '@univerjs/core';
|
||||
import { ConfigProvider, defaultTheme, greenTheme, themeInstance } from '@univerjs/design';
|
||||
import { ConfigProvider } from '@univerjs/design';
|
||||
import enUS from '@univerjs/design/locale/en-US';
|
||||
import zhCN from '@univerjs/design/locale/zh-CN';
|
||||
import { DesktopLocalStorageService, RediContext } from '@univerjs/ui';
|
||||
@@ -49,8 +49,8 @@ import React, { useMemo } from 'react';
|
||||
import './global.css';
|
||||
|
||||
export const themes: Record<string, Record<string, string>> = {
|
||||
default: defaultTheme,
|
||||
green: greenTheme,
|
||||
// default: defaultTheme,
|
||||
// green: greenTheme,
|
||||
};
|
||||
|
||||
const preview: Preview = {
|
||||
@@ -104,7 +104,7 @@ const preview: Preview = {
|
||||
},
|
||||
|
||||
decorators: [(Story, context) => {
|
||||
themeInstance.setTheme(document.body, themes[context.globals.theme]);
|
||||
// themeInstance.setTheme(document.body, themes[context.globals.theme]);
|
||||
const designLocale = context.globals.i18n === LocaleType.ZH_CN ? zhCN.design : enUS.design;
|
||||
|
||||
if (context.globals.darkMode === 'dark') {
|
||||
|
||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 49 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 52 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 51 KiB |
@@ -15,7 +15,6 @@
|
||||
*/
|
||||
|
||||
import { LocaleType, LogLevel, Univer, UniverInstanceType } from '@univerjs/core';
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
|
||||
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
|
||||
@@ -32,7 +31,6 @@ import '../global.css';
|
||||
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.ZH_CN,
|
||||
locales: {
|
||||
[LocaleType.ZH_CN]: zhCN,
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core';
|
||||
import { FUniver } from '@univerjs/core/facade';
|
||||
import { UniverDebuggerPlugin } from '@univerjs/debugger';
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui';
|
||||
import { UniverDocsHyperLinkUIPlugin } from '@univerjs/docs-hyper-link-ui';
|
||||
@@ -38,7 +37,6 @@ const IS_E2E: boolean = !!process.env.IS_E2E;
|
||||
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.ZH_CN,
|
||||
locales: {
|
||||
[LocaleType.ZH_CN]: zhCN,
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
|
||||
import type { FUniver } from '@univerjs/core/facade';
|
||||
import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core';
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
|
||||
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
|
||||
@@ -39,7 +38,6 @@ import '../global.css';
|
||||
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.EN_US,
|
||||
locales: {
|
||||
[LocaleType.EN_US]: enUS,
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
|
||||
import { CellValueType, LocaleType, LogLevel, Univer, UserManagerService } from '@univerjs/core';
|
||||
import { FUniver } from '@univerjs/core/facade';
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui';
|
||||
import { UniverDocsMentionUIPlugin } from '@univerjs/docs-mention-ui';
|
||||
@@ -78,7 +77,6 @@ export const mockUser = {
|
||||
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.ZH_CN,
|
||||
locales: {
|
||||
[LocaleType.ZH_CN]: zhCN,
|
||||
|
||||
@@ -15,8 +15,7 @@
|
||||
*/
|
||||
|
||||
import { LocaleType, LogLevel, Tools, Univer, UniverInstanceType } from '@univerjs/core';
|
||||
import { defaultTheme, render } from '@univerjs/design';
|
||||
|
||||
import { render } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
|
||||
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
|
||||
@@ -29,7 +28,7 @@ import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
|
||||
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui';
|
||||
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
|
||||
import { UniverUIPlugin } from '@univerjs/ui';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { Mosaic, MosaicWindow } from 'react-mosaic-component';
|
||||
import { enUS, faIR, frFR, ruRU, zhCN } from '../locales';
|
||||
|
||||
@@ -40,7 +39,6 @@ import '../global.css';
|
||||
function factory(id: string) {
|
||||
return function createUniverOnContainer() {
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.ZH_CN,
|
||||
locales: {
|
||||
[LocaleType.ZH_CN]: zhCN,
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
|
||||
import { LocaleType, LogLevel, Univer, UniverInstanceType } from '@univerjs/core';
|
||||
import { UniverDebuggerPlugin } from '@univerjs/debugger';
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
|
||||
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
|
||||
@@ -35,7 +34,6 @@ import '../global.css';
|
||||
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.ZH_CN,
|
||||
locales: {
|
||||
[LocaleType.ZH_CN]: zhCN,
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core';
|
||||
import { FUniver } from '@univerjs/core/facade';
|
||||
import { UniverDebuggerPlugin } from '@univerjs/debugger';
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
|
||||
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
|
||||
@@ -89,8 +88,6 @@ export const mockUser = {
|
||||
function createNewInstance() {
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.ZH_CN,
|
||||
locales: {
|
||||
[LocaleType.ZH_CN]: zhCN,
|
||||
[LocaleType.EN_US]: enUS,
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
*/
|
||||
|
||||
import { LocaleType, Univer, UniverInstanceType } from '@univerjs/core';
|
||||
import { greenTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
|
||||
import { UniverDrawingPlugin } from '@univerjs/drawing';
|
||||
@@ -32,7 +31,6 @@ import '../global.css';
|
||||
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: greenTheme,
|
||||
locale: LocaleType.ZH_CN,
|
||||
locales: {
|
||||
[LocaleType.ZH_CN]: zhCN,
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
import { Injector, LocaleType, LogLevel, Univer, UniverInstanceType } from '@univerjs/core';
|
||||
import { FUniver } from '@univerjs/core/facade';
|
||||
import { UniverDebuggerPlugin } from '@univerjs/debugger';
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
import { UniverDocsPlugin } from '@univerjs/docs';
|
||||
import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui';
|
||||
import { DocUIController, UniverDocsUIPlugin } from '@univerjs/docs-ui';
|
||||
@@ -53,7 +52,6 @@ const LOAD_LAZY_PLUGINS_TIMEOUT = 4_000;
|
||||
|
||||
// univer
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.EN_US,
|
||||
locales: {
|
||||
[LocaleType.EN_US]: enUS,
|
||||
|
||||
+5
-5
@@ -3,7 +3,7 @@
|
||||
"type": "module",
|
||||
"version": "0.7.0-beta.0",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@10.8.0",
|
||||
"packageManager": "pnpm@10.10.0",
|
||||
"author": "DreamNum Co., Ltd. <developer@univer.ai>",
|
||||
"license": "Apache-2.0",
|
||||
"funding": {
|
||||
@@ -48,7 +48,7 @@
|
||||
"@antfu/eslint-config": "4.12.0",
|
||||
"@commitlint/cli": "^19.8.0",
|
||||
"@commitlint/config-conventional": "^19.8.0",
|
||||
"@eslint-react/eslint-plugin": "^1.48.5",
|
||||
"@eslint-react/eslint-plugin": "^1.49.0",
|
||||
"@playwright/test": "^1.52.0",
|
||||
"@release-it-plugins/workspaces": "^4.2.0",
|
||||
"@release-it/conventional-changelog": "^9.0.4",
|
||||
@@ -60,7 +60,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"@univerjs/design": "workspace:*",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"eslint": "9.25.1",
|
||||
"eslint": "9.26.0",
|
||||
"eslint-plugin-format": "^1.0.1",
|
||||
"eslint-plugin-header": "^3.1.1",
|
||||
"eslint-plugin-jsdoc": "^50.6.11",
|
||||
@@ -72,7 +72,7 @@
|
||||
"fs-extra": "^11.3.0",
|
||||
"husky": "^9.1.7",
|
||||
"lint-staged": "^15.5.1",
|
||||
"posthog-node": "^4.15.0",
|
||||
"posthog-node": "^4.17.1",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"release-it": "^17.11.0",
|
||||
@@ -80,7 +80,7 @@
|
||||
"tsx": "^4.19.4",
|
||||
"turbo": "^2.5.2",
|
||||
"typescript": "^5.8.3",
|
||||
"vitest": "^3.1.2"
|
||||
"vitest": "^3.1.3"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
"@univerjs/mockdata": "workspace:*",
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-drawing-ui": "workspace:*",
|
||||
"@univerjs/themes": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*",
|
||||
"@univerjs/watermark": "workspace:*"
|
||||
},
|
||||
@@ -85,8 +86,8 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2",
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3",
|
||||
"vue": "^3.5.13"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,11 +14,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { IAccessor, ICommand, IStyleSheet } from '@univerjs/core';
|
||||
import type { IAccessor, ICommand } from '@univerjs/core';
|
||||
import type { Theme } from '@univerjs/themes';
|
||||
import { CommandType, ThemeService } from '@univerjs/core';
|
||||
|
||||
export interface IThemeCommandParams {
|
||||
value?: IStyleSheet;
|
||||
value?: Theme;
|
||||
}
|
||||
|
||||
export const ThemeOperation: ICommand = {
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
import type { IAccessor } from '@univerjs/core';
|
||||
import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui';
|
||||
import { LocaleType } from '@univerjs/core';
|
||||
import { defaultTheme, greenTheme } from '@univerjs/design';
|
||||
import { defaultTheme, greenTheme } from '@univerjs/themes';
|
||||
// import { defaultTheme } from '@univerjs/themes';
|
||||
import { MenuItemType } from '@univerjs/ui';
|
||||
|
||||
import { CreateFloatDomCommand } from '../commands/commands/float-dom.command';
|
||||
import { CreateEmptySheetCommand, DisposeCurrentUnitCommand, DisposeUniverCommand, LoadSheetSnapshotCommand } from '../commands/commands/unit.command';
|
||||
import { ShowCellContentOperation } from '../commands/operations/cell.operation';
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,8 +132,7 @@ export function UniSlideSideBar() {
|
||||
univer-relative univer-mt-4 univer-flex univer-h-8 univer-cursor-pointer univer-items-center
|
||||
univer-justify-center univer-rounded-lg univer-border-0 univer-bg-transparent univer-px-1
|
||||
univer-text-primary-500
|
||||
before:absolute before:left-0 before:top-0 before:h-[1px] before:content-['']
|
||||
before:univer-bg-gray-200
|
||||
before:absolute before:left-0 before:top-0 before:h-px before:content-[''] before:univer-bg-gray-200
|
||||
hover:univer-bg-gray-100
|
||||
`}
|
||||
onClick={handleAppendSlide}
|
||||
|
||||
@@ -69,17 +69,18 @@
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"@univerjs/sheets-ui": "workspace:*",
|
||||
"@univerjs/ui": "workspace:*",
|
||||
"@xyflow/react": "^12.5.5"
|
||||
"@xyflow/react": "^12.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"@univerjs/themes": "workspace:*",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,7 +185,7 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?:
|
||||
<a
|
||||
className={clsx(
|
||||
`
|
||||
univer-h-[28px] univer-w-[55px] univer-cursor-pointer univer-rounded univer-text-center
|
||||
univer-h-7 univer-w-[55px] univer-cursor-pointer univer-rounded univer-text-center
|
||||
univer-text-xs univer-leading-loose univer-text-gray-700 univer-no-underline
|
||||
univer-transition-all univer-duration-200
|
||||
group-data-[open=true]:univer-bg-gray-200
|
||||
|
||||
@@ -111,7 +111,7 @@ export const UniFloatingToolbar = React.forwardRef<IFloatingToolbarRef, { node:
|
||||
});
|
||||
|
||||
export function UniDiv() {
|
||||
return <div className="univer-h-6 univer-w-[1px] univer-bg-gray-100" />;
|
||||
return <div className="univer-h-6 univer-w-px univer-bg-gray-100" />;
|
||||
}
|
||||
|
||||
export function UnitName({ unitId }: { unitId: string }) {
|
||||
|
||||
@@ -25,7 +25,7 @@ import type {
|
||||
} from '@xyflow/react';
|
||||
import type { IFloatingToolbarRef } from '../uni-toolbar/UniFloatToolbar';
|
||||
import { debounce, ICommandService, IContextService, IUniverInstanceService, LocaleService, ThemeService } from '@univerjs/core';
|
||||
import { clsx, ConfigContext, ConfigProvider, defaultTheme, themeInstance } from '@univerjs/design';
|
||||
import { clsx, ConfigContext, ConfigProvider } from '@univerjs/design';
|
||||
import { IRenderManagerService } from '@univerjs/engine-render';
|
||||
import { MenuSingle } from '@univerjs/icons';
|
||||
import {
|
||||
@@ -45,7 +45,7 @@ import {
|
||||
ReactFlowProvider,
|
||||
useNodesState,
|
||||
} from '@xyflow/react';
|
||||
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { UniFocusUnitOperation } from '../../commands/operations/uni-focus-unit.operation';
|
||||
import { FlowManagerService } from '../../services/flow/flow-manager.service';
|
||||
@@ -91,12 +91,6 @@ export function UniWorkbench(props: IUniWorkbenchProps) {
|
||||
|
||||
const focusedUnit = useObservable(instanceService.focused$);
|
||||
|
||||
useEffect(() => {
|
||||
if (!themeService.getCurrentTheme()) {
|
||||
themeService.setTheme(defaultTheme);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (contentRef.current) {
|
||||
onRendered?.(contentRef.current);
|
||||
@@ -129,10 +123,6 @@ export function UniWorkbench(props: IUniWorkbenchProps) {
|
||||
localeService.localeChanged$.subscribe(() => {
|
||||
setLocale(localeService.getLocales() as unknown as ILocale);
|
||||
}),
|
||||
themeService.currentTheme$.subscribe((theme) => {
|
||||
themeInstance.setTheme(mountContainer, theme);
|
||||
portalContainer && themeInstance.setTheme(portalContainer, theme);
|
||||
}),
|
||||
];
|
||||
|
||||
return () => {
|
||||
|
||||
@@ -74,6 +74,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@univerjs/protocol": "0.1.45",
|
||||
"@univerjs/themes": "workspace:*",
|
||||
"@wendellhu/redi": "0.18.0",
|
||||
"async-lock": "^1.4.1",
|
||||
"dayjs": "^1.11.13",
|
||||
@@ -94,7 +95,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,7 +124,7 @@ export { IResourceLoaderService } from './services/resource-loader/type';
|
||||
export { ResourceManagerService } from './services/resource-manager/resource-manager.service';
|
||||
export type { IResourceHook, IResources } from './services/resource-manager/type';
|
||||
export { IResourceManagerService } from './services/resource-manager/type';
|
||||
export { type IStyleSheet, ThemeService } from './services/theme/theme.service';
|
||||
export { ThemeService } from './services/theme/theme.service';
|
||||
|
||||
// #region sheet
|
||||
|
||||
|
||||
@@ -15,23 +15,20 @@
|
||||
*/
|
||||
|
||||
import type { Observable } from 'rxjs';
|
||||
import type { Nullable } from '../../shared/types';
|
||||
|
||||
import { defaultTheme } from '@univerjs/themes';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { Disposable, toDisposable } from '../../shared/lifecycle';
|
||||
|
||||
export interface IStyleSheet {
|
||||
[key: string]: string;
|
||||
}
|
||||
export type Theme = typeof defaultTheme;
|
||||
|
||||
export class ThemeService extends Disposable {
|
||||
private readonly _darkMode$ = new BehaviorSubject<boolean>(false);
|
||||
readonly darkMode$: Observable<boolean> = this._darkMode$.asObservable();
|
||||
get darkMode(): boolean { return this._darkMode$.getValue(); }
|
||||
|
||||
private _currentTheme: Nullable<IStyleSheet>;
|
||||
private readonly _currentTheme$ = new BehaviorSubject<IStyleSheet>({});
|
||||
readonly currentTheme$: Observable<IStyleSheet> = this._currentTheme$.asObservable();
|
||||
private _currentTheme: Theme = defaultTheme;
|
||||
private readonly _currentTheme$ = new BehaviorSubject<Theme>(this._currentTheme);
|
||||
readonly currentTheme$: Observable<Theme> = this._currentTheme$.asObservable();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -42,15 +39,11 @@ export class ThemeService extends Disposable {
|
||||
}));
|
||||
}
|
||||
|
||||
getCurrentTheme(): IStyleSheet {
|
||||
if (!this._currentTheme) {
|
||||
throw new Error('[ThemeService]: current theme is not set!');
|
||||
}
|
||||
|
||||
getCurrentTheme(): Theme {
|
||||
return this._currentTheme;
|
||||
}
|
||||
|
||||
setTheme(theme: IStyleSheet): void {
|
||||
setTheme(theme: Theme): void {
|
||||
this._currentTheme = theme;
|
||||
this._currentTheme$.next(theme);
|
||||
}
|
||||
|
||||
@@ -14,12 +14,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { Theme } from '@univerjs/themes';
|
||||
import type { Dependency, IDisposable } from './common/di';
|
||||
import type { UnitModel, UnitType } from './common/unit';
|
||||
import type { LogLevel } from './services/log/log.service';
|
||||
import type { DependencyOverride } from './services/plugin/plugin-override';
|
||||
import type { Plugin, PluginCtor } from './services/plugin/plugin.service';
|
||||
import type { IStyleSheet } from './services/theme/theme.service';
|
||||
import type { ILocales } from './shared';
|
||||
import type { IWorkbookData } from './sheets/typedef';
|
||||
import type { LocaleType } from './types/enum/locale-type';
|
||||
@@ -56,7 +56,7 @@ import { Workbook } from './sheets/workbook';
|
||||
import { SlideDataModel } from './slides/slide-model';
|
||||
|
||||
export interface IUniverConfig {
|
||||
theme: IStyleSheet;
|
||||
theme?: Theme;
|
||||
locale: LocaleType;
|
||||
locales: ILocales;
|
||||
logLevel: LogLevel;
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
"@univerjs/sheets": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,21 +32,6 @@ pnpm add @univerjs/design
|
||||
|
||||
This package contains CSS and has the highest priority. Please import it before importing any other Univer style files.
|
||||
|
||||
### Built-in themes
|
||||
|
||||
The package provides two built-in themes: `defaultTheme` and `greenTheme`. You can import them directly and use them in your application.
|
||||
|
||||
```typescript
|
||||
import { defaultTheme } from '@univerjs/design';
|
||||
// import { greenTheme } from '@univerjs/design';
|
||||
|
||||
// Use the default theme
|
||||
new Univer({
|
||||
theme: defaultTheme,
|
||||
// theme: greenTheme,
|
||||
});
|
||||
```
|
||||
|
||||
<!-- Links -->
|
||||
[npm-version-shield]: https://img.shields.io/npm/v/@univerjs/design?style=flat-square
|
||||
[npm-version-link]: https://npmjs.com/package/@univerjs/design
|
||||
|
||||
@@ -68,14 +68,15 @@
|
||||
"react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.1.11",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.12",
|
||||
"@radix-ui/react-popover": "^1.1.11",
|
||||
"@radix-ui/react-separator": "^1.1.4",
|
||||
"@radix-ui/react-slot": "^1.2.0",
|
||||
"@radix-ui/react-tooltip": "^1.2.4",
|
||||
"@radix-ui/react-dialog": "^1.1.13",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.14",
|
||||
"@radix-ui/react-popover": "^1.1.13",
|
||||
"@radix-ui/react-separator": "^1.1.6",
|
||||
"@radix-ui/react-slot": "^1.2.2",
|
||||
"@radix-ui/react-tooltip": "^1.2.6",
|
||||
"@rc-component/trigger": "^2.2.6",
|
||||
"@univerjs/icons": "^0.3.24",
|
||||
"@univerjs/themes": "workspace:*",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
@@ -95,14 +96,13 @@
|
||||
"@types/react-transition-group": "^4.4.12",
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"@univerjs/core": "workspace:*",
|
||||
"less": "^4.3.0",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
.button {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
transition: all 0.15s;
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
color: rgb(var(--grey-300));
|
||||
}
|
||||
|
||||
/** type */
|
||||
&-default {
|
||||
font-weight: 400;
|
||||
color: rgb(var(--text-color));
|
||||
background-color: rgb(var(--bg-color-secondary));
|
||||
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
color: rgb(var(--grey-300));
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgb(var(--primary-color));
|
||||
border-color: rgb(var(--primary-color));
|
||||
}
|
||||
}
|
||||
|
||||
&-primary {
|
||||
font-weight: 500;
|
||||
color: rgb(var(--color-white));
|
||||
background-color: rgb(var(--primary-color));
|
||||
border-color: rgb(var(--primary-color));
|
||||
|
||||
&[disabled] {
|
||||
background-color: rgb(var(--bg-color-secondary));
|
||||
border-color: rgb(var(--border-color));
|
||||
|
||||
&:hover {
|
||||
color: rgb(var(--grey-300));
|
||||
background-color: rgb(var(--bg-color-secondary));
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgb(var(--color-white));
|
||||
background-color: rgb(var(--primary-color-hover));
|
||||
border-color: rgb(var(--primary-color-hover));
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: rgb(var(--text-color));
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(var(--bg-color-hover));
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
color: rgb(var(--primary-color));
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(var(--bg-color-hover));
|
||||
}
|
||||
}
|
||||
|
||||
/** size */
|
||||
&-small {
|
||||
padding: 6px 8px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
&-middle {
|
||||
padding: 8px 12px;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
&-large {
|
||||
padding: 10px 20px;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
/** block */
|
||||
&-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -20,7 +20,7 @@ import { PickerPanel } from 'rc-picker';
|
||||
import generateConfig from 'rc-picker/lib/generate/dayjs';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
|
||||
export type IDatePanelProps = Omit<BasePickerPanelProps<dayjs.Dayjs>, 'prefixCls' | 'locale' | 'generateConfig'> & {
|
||||
multiple?: boolean;
|
||||
|
||||
@@ -19,9 +19,9 @@ import type { PickerProps } from 'rc-picker';
|
||||
import { CalendarSingle } from '@univerjs/icons';
|
||||
import RcPicker from 'rc-picker';
|
||||
import generateConfig from 'rc-picker/lib/generate/dayjs';
|
||||
import React, { useContext } from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider/ConfigProvider';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
|
||||
export interface IDatePickerProps extends Omit<PickerProps<dayjs.Dayjs>, 'value' | 'onChange' | 'locale' | 'generateConfig' | 'prefixCls'> {
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,307 @@
|
||||
.date-picker {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
@apply univer-bg-white univer-border univer-border-solid univer-border-gray-200;
|
||||
}
|
||||
|
||||
.date-picker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.date-picker-invalid {
|
||||
box-shadow: 0 0 2px red;
|
||||
}
|
||||
|
||||
.date-picker-panel {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.date-picker-panel-focused {
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
.date-picker-panel-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.date-picker-suffix-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
@apply univer-text-gray-600;
|
||||
}
|
||||
|
||||
.date-picker-decade-panel,
|
||||
.date-picker-year-panel,
|
||||
.date-picker-month-panel,
|
||||
.date-picker-week-panel,
|
||||
.date-picker-date-panel,
|
||||
.date-picker-time-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.date-picker-decade-panel table,
|
||||
.date-picker-year-panel table,
|
||||
.date-picker-month-panel table,
|
||||
.date-picker-week-panel table,
|
||||
.date-picker-date-panel table,
|
||||
.date-picker-time-panel table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.date-picker-header {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date-picker-header > * {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.date-picker-header-view {
|
||||
height: 16px;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-picker-header-view > button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-picker-header-super-prev-btn,
|
||||
.date-picker-header-super-next-btn,
|
||||
.date-picker-header-prev-btn,
|
||||
.date-picker-header-next-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.date-picker-cell {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.date-picker-cell-disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.date-picker-cell-inner {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.date-picker-cell-in-view {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.date-picker-cell-in-range > .date-picker-cell-inner {
|
||||
background: rgba(0, 0, 255, 0.05);
|
||||
}
|
||||
|
||||
.date-picker-cell-hover > .date-picker-cell-inner {
|
||||
@apply univer-bg-gray-100;
|
||||
}
|
||||
|
||||
.date-picker-cell-range-hover-start::after,
|
||||
.date-picker-cell-range-hover-end::after,
|
||||
.date-picker-cell-range-hover::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 1px solid green;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.date-picker-cell-range-hover-start::after {
|
||||
border-left: 1px solid green !important;
|
||||
}
|
||||
|
||||
.date-picker-cell-range-hover-end::after {
|
||||
border-right: 1px solid green !important;
|
||||
}
|
||||
|
||||
.date-picker-cell-today > .date-picker-cell-inner {
|
||||
@apply univer-border univer-border-solid univer-border-primary-600;
|
||||
}
|
||||
|
||||
.date-picker-cell-range-start > .date-picker-cell-inner,
|
||||
.date-picker-cell-range-end > .date-picker-cell-inner,
|
||||
.date-picker-cell-selected > .date-picker-cell-inner {
|
||||
color: #fff;
|
||||
@apply univer-bg-primary-600;
|
||||
}
|
||||
|
||||
/* Preset */
|
||||
.date-picker-presets {
|
||||
background: #ccccff;
|
||||
}
|
||||
|
||||
.date-picker-presets ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Now Button */
|
||||
.date-picker-now {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.date-picker-now-btn {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
@apply univer-text-primary-600;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.date-picker-footer,
|
||||
.date-picker-picker-footer {
|
||||
margin-top: 12px;
|
||||
@apply univer-border-0 univer-border-t univer-border-solid univer-border-t-gray-200;
|
||||
}
|
||||
|
||||
/* Clear Button */
|
||||
.date-picker-clear {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-picker-clear-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
@apply univer-bg-gray-500;
|
||||
}
|
||||
|
||||
.date-picker-clear-btn::before {
|
||||
content: '×';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.date-picker-dropdown {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.date-picker-dropdown-range {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.date-picker-dropdown-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Range Picker */
|
||||
.date-picker-range {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.date-picker-range-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.date-picker-active-bar {
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background: green;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.date-picker-focused .date-picker-active-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Panel Container */
|
||||
.date-picker-panel-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transition: margin 0.3s;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.date-picker-panel-layout {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
@apply univer-bg-white univer-border univer-border-solid univer-border-gray-200 univer-rounded univer-shadow univer-p-4;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.date-picker-input {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-picker-input > input {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.date-picker-input > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -1,682 +0,0 @@
|
||||
@prefix-cls: date-picker;
|
||||
|
||||
@background-color: rgb(var(--bg-color-secondary));
|
||||
|
||||
@input-placeholder-color: hsv(0, 0, 75%);
|
||||
|
||||
@time-panel-padding-total: 180px;
|
||||
// @time-panel-padding-top: 90px;
|
||||
@time-panel-padding-top: 0;
|
||||
|
||||
@cell-size: 24px;
|
||||
|
||||
.placeholder(@color: @input-placeholder-color) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&:placeholder-shown {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-focused {
|
||||
// border: 1px solid rgb(var(--primary-color));
|
||||
}
|
||||
&-invalid {
|
||||
box-shadow: 0 0 2px red;
|
||||
}
|
||||
&-panel {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
&-focused {
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-suffix-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
color: rgb(var(--text-color-secondary));
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// ===================== Shared Panel =====================
|
||||
&-decade-panel,
|
||||
&-year-panel,
|
||||
&-month-panel,
|
||||
&-week-panel,
|
||||
&-date-panel,
|
||||
&-time-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
&-header {
|
||||
margin-bottom: var(--margin-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&-view {
|
||||
height: 16px;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--margin-xs);
|
||||
|
||||
> button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.btn () {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
line-height: 16px;
|
||||
font-size: var(--font-size-lg);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-super {
|
||||
&-prev,
|
||||
&-next {
|
||||
&-btn {
|
||||
.btn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next {
|
||||
&-btn {
|
||||
.btn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
&-cell {
|
||||
color: #aaa;
|
||||
|
||||
&-disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: @cell-size;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: @cell-size;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--border-radius-base);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
&-in-view {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&-in-range > &-inner {
|
||||
background: fade(blue, 5%);
|
||||
}
|
||||
|
||||
&-hover > &-inner {
|
||||
background: rgb(var(--bg-color));
|
||||
}
|
||||
|
||||
&-range-hover-start,
|
||||
&-range-hover-end,
|
||||
&-range-hover {
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 1px solid green;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-range-hover-start::after {
|
||||
border-left: 1px solid green !important;
|
||||
}
|
||||
&-range-hover-end::after {
|
||||
border-right: 1px solid green !important;
|
||||
}
|
||||
|
||||
&-today > &-inner {
|
||||
border: 1px solid rgb(var(--primary-color));
|
||||
}
|
||||
&-range-start > &-inner,
|
||||
&-range-end > &-inner,
|
||||
&-selected > &-inner {
|
||||
// TODO:
|
||||
// background: fade(blue, 20%);
|
||||
color: #fff;
|
||||
background: rgb(var(--primary-color));
|
||||
}
|
||||
}
|
||||
|
||||
// Preset
|
||||
&-presets {
|
||||
background: #ccccff;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-now {
|
||||
padding-top: var(--padding-base);
|
||||
|
||||
&-btn {
|
||||
font-size: var(--font-size-xs);
|
||||
color: rgb(var(--primary-color));
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer,
|
||||
&-picker-footer {
|
||||
margin-top: var(--margin-sm);
|
||||
border-top: 1px solid rgb(var(--border-color));
|
||||
}
|
||||
|
||||
&-ranges {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-ok {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&-decade-panel {
|
||||
.@{prefix-cls}-content {
|
||||
tbody {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: 78px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// ================== Year & Month Panel ==================
|
||||
&-year-panel,
|
||||
&-month-panel {
|
||||
.@{prefix-cls}-content {
|
||||
tbody {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Week Panel ======================
|
||||
&-week-panel {
|
||||
&-row {
|
||||
&:hover {
|
||||
.@{prefix-cls}-cell {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
|
||||
&-selected {
|
||||
.@{prefix-cls}-cell {
|
||||
background: rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&-range {
|
||||
&-hover {
|
||||
.@{prefix-cls}-cell {
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&-start,
|
||||
&-end {
|
||||
.@{prefix-cls}-cell {
|
||||
background: rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell,
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: @cell-size;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell-week {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner,
|
||||
.@{prefix-cls}-cell-selected > .@{prefix-cls}-cell-inner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Date Panel ======================
|
||||
&-date-panel {
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: @cell-size;
|
||||
height: @cell-size;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Time Panel ======================
|
||||
&-time-panel {
|
||||
width: auto;
|
||||
|
||||
.@{prefix-cls}-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-height: 200px;
|
||||
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: @time-panel-padding-top;
|
||||
// right: -5px;
|
||||
// left: -5px;
|
||||
// height: 20px;
|
||||
// background: rgba(255, 0, 0, 0.05);
|
||||
// content: '';
|
||||
// pointer-events: none;
|
||||
// }
|
||||
}
|
||||
|
||||
// &-column-holder {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
&-column-title {
|
||||
font-size: 14px;
|
||||
line-height: @cell-size;
|
||||
}
|
||||
|
||||
&-column {
|
||||
flex: auto;
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
// padding: 0 0 180px 0;
|
||||
padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top);
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
transition: background 0.3s;
|
||||
|
||||
&-active {
|
||||
background: rgba(0, 0, 255, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
> li {
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.@{prefix-cls}-time-panel-cell {
|
||||
&-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
background: rgba(0, 0, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-time-panel-cell-inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @cell-size;
|
||||
margin: 0;
|
||||
// padding: 0 0 0 12px;
|
||||
color: #333;
|
||||
line-height: @cell-size;
|
||||
text-align: center;
|
||||
|
||||
.@{prefix-cls}-panel-rtl & {
|
||||
padding: 0 12px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Date Time =======================
|
||||
&-datetime-panel {
|
||||
display: flex;
|
||||
|
||||
.@{prefix-cls}-time-panel {
|
||||
border-left: 1px solid #999;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-date-panel,
|
||||
.@{prefix-cls}-time-panel {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
// Keyboard
|
||||
&-active {
|
||||
.@{prefix-cls}-date-panel,
|
||||
.@{prefix-cls}-time-panel {
|
||||
opacity: 0.3;
|
||||
|
||||
&-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Input =========================
|
||||
&-input {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
|
||||
.@{prefix-cls}-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-active {
|
||||
> input {
|
||||
background: rgba(0, 0, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
box-sizing: border-box;
|
||||
.placeholder();
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
> input {
|
||||
color: @input-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-clear {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.@{prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
background-color: rgb(var(--grey-500));
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '×';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================= Dropdown =======================
|
||||
&-dropdown {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
||||
&-range {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Panel
|
||||
@arrow-size: 10px;
|
||||
|
||||
&-placement-topLeft,
|
||||
&-placement-topRight {
|
||||
.@{prefix-cls}-range-arrow {
|
||||
bottom: (@arrow-size / 2 + 1px);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
&-placement-bottomLeft,
|
||||
&-placement-bottomright {
|
||||
.@{prefix-cls}-range-arrow {
|
||||
top: (@arrow-size / 2 + 1px);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-range-arrow {
|
||||
position: absolute;
|
||||
left: @arrow-size;
|
||||
z-index: 1;
|
||||
width: @arrow-size;
|
||||
height: @arrow-size;
|
||||
margin-left: 10px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{prefix-cls}-dropdown-rtl& {
|
||||
right: @arrow-size;
|
||||
left: auto;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-sizing: border-box;
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
|
||||
.@{prefix-cls}-dropdown-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: @arrow-size;
|
||||
height: @arrow-size;
|
||||
border: (@arrow-size / 2) solid blue;
|
||||
border-color: blue blue transparent transparent;
|
||||
}
|
||||
&::after {
|
||||
width: @arrow-size - 2px;
|
||||
height: @arrow-size - 2px;
|
||||
border: (@arrow-size - 2px) / 2 solid blue;
|
||||
border-color: @background-color @background-color transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// = Range Picker =
|
||||
// ========================================================
|
||||
&-range {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-active-bar {
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background: green;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.@{prefix-cls}-focused {
|
||||
.@{prefix-cls}-active-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-panel-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transition: margin 0.3s;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
&-panel-layout {
|
||||
padding: var(--padding-lg);
|
||||
background: rgb(var(--bg-color-secondary));
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// = Overflow =
|
||||
// ========================================================
|
||||
&-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-selection-overflow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid green;
|
||||
|
||||
&-item {
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-selection-item {
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
&-multiple-input {
|
||||
width: 10px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
@@ -18,7 +18,7 @@ import type { Meta } from '@storybook/react';
|
||||
|
||||
import type { NoUndefinedRangeValueType } from 'rc-picker/lib/PickerInput/RangePicker';
|
||||
import { dayjs } from '@univerjs/core';
|
||||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { DateRangePicker } from './DateRangePicker';
|
||||
|
||||
const meta: Meta<typeof DateRangePicker> = {
|
||||
|
||||
@@ -19,9 +19,9 @@ import type { NoUndefinedRangeValueType, RangePickerProps } from 'rc-picker/lib/
|
||||
import { CalendarSingle, GuideSingle } from '@univerjs/icons';
|
||||
import { RangePicker } from 'rc-picker';
|
||||
import generateConfig from 'rc-picker/lib/generate/dayjs';
|
||||
import React, { useContext } from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider/ConfigProvider';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
|
||||
export interface IDateRangePickerProps extends Omit<RangePickerProps<dayjs.Dayjs>, 'value' | 'onChange' | 'locale' | 'generateConfig' | 'prefixCls'> {
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
.date-range-picker {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
@apply univer-border univer-border-solid univer-border-gray-200;
|
||||
}
|
||||
|
||||
.date-range-picker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.date-range-picker-invalid {
|
||||
box-shadow: 0 0 2px red;
|
||||
}
|
||||
|
||||
.date-range-picker-panel {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.date-range-picker-panel-focused {
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
.date-range-picker-panel-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.date-range-picker-suffix-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
@apply univer-text-gray-600;
|
||||
}
|
||||
|
||||
/* Shared Panels */
|
||||
.date-range-picker-decade-panel,
|
||||
.date-range-picker-year-panel,
|
||||
.date-range-picker-month-panel,
|
||||
.date-range-picker-week-panel,
|
||||
.date-range-picker-date-panel,
|
||||
.date-range-picker-time-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.date-range-picker-decade-panel table,
|
||||
.date-range-picker-year-panel table,
|
||||
.date-range-picker-month-panel table,
|
||||
.date-range-picker-week-panel table,
|
||||
.date-range-picker-date-panel table,
|
||||
.date-range-picker-time-panel table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.date-range-picker-header {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date-range-picker-header > * {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.date-range-picker-header-view {
|
||||
height: 16px;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-range-picker-header-view > button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-range-picker-header-super-prev-btn,
|
||||
.date-range-picker-header-super-next-btn,
|
||||
.date-range-picker-header-prev-btn,
|
||||
.date-range-picker-header-next-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.date-range-picker-cell {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-inner {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-in-view {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-in-range > .date-range-picker-cell-inner {
|
||||
background: rgba(0, 0, 255, 0.05);
|
||||
}
|
||||
|
||||
.date-range-picker-cell-hover > .date-range-picker-cell-inner {
|
||||
@apply univer-bg-gray-100;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-range-hover-start::after,
|
||||
.date-range-picker-cell-range-hover-end::after,
|
||||
.date-range-picker-cell-range-hover::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 1px solid green;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-range-hover-start::after {
|
||||
border-left: 1px solid green !important;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-range-hover-end::after {
|
||||
border-right: 1px solid green !important;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-today > .date-range-picker-cell-inner {
|
||||
@apply univer-border univer-border-solid univer-border-primary-600;
|
||||
}
|
||||
|
||||
.date-range-picker-cell-range-start > .date-range-picker-cell-inner,
|
||||
.date-range-picker-cell-range-end > .date-range-picker-cell-inner,
|
||||
.date-range-picker-cell-selected > .date-range-picker-cell-inner {
|
||||
color: #fff;
|
||||
@apply univer-bg-primary-600;
|
||||
}
|
||||
|
||||
/* Preset */
|
||||
.date-range-picker-presets {
|
||||
background: #ccccff;
|
||||
}
|
||||
|
||||
.date-range-picker-presets ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Now Button */
|
||||
.date-range-picker-now {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.date-range-picker-now-btn {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
@apply univer-text-primary-600;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.date-range-picker-footer,
|
||||
.date-range-picker-picker-footer {
|
||||
margin-top: 12px;
|
||||
@apply univer-border-0 univer-border-t univer-border-solid univer-border-t-gray-200;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.date-range-picker-dropdown {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.date-range-picker-dropdown-range {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.date-range-picker-dropdown-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Range Picker */
|
||||
.date-range-picker-range {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.date-range-picker-range-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.date-range-picker-active-bar {
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
@apply univer-bg-primary-600;
|
||||
}
|
||||
|
||||
.date-range-picker-focused .date-range-picker-active-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.date-range-picker-panel-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transition: margin 0.3s;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.date-range-picker-panel-layout {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
@apply univer-bg-white univer-border univer-border-solid univer-border-gray-200 univer-rounded univer-shadow univer-p-4;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.date-range-picker-input {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-range-picker-input > input {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.date-range-picker-input > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -1,689 +0,0 @@
|
||||
@prefix-cls: date-range-picker;
|
||||
|
||||
@background-color: rgb(var(--bg-color-secondary));
|
||||
|
||||
@input-placeholder-color: hsv(0, 0, 75%);
|
||||
|
||||
@time-panel-padding-total: 180px;
|
||||
// @time-panel-padding-top: 90px;
|
||||
@time-panel-padding-top: 0;
|
||||
|
||||
@cell-size: 24px;
|
||||
|
||||
.placeholder(@color: @input-placeholder-color) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&:placeholder-shown {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
height: 32px;
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-focused {
|
||||
// border: 1px solid rgb(var(--primary-color));
|
||||
}
|
||||
&-invalid {
|
||||
box-shadow: 0 0 2px red;
|
||||
}
|
||||
&-panel {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
&-focused {
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-suffix-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
color: rgb(var(--text-color-secondary));
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// ===================== Shared Panel =====================
|
||||
&-decade-panel,
|
||||
&-year-panel,
|
||||
&-month-panel,
|
||||
&-week-panel,
|
||||
&-date-panel,
|
||||
&-time-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
&-header {
|
||||
margin-bottom: var(--margin-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&-view {
|
||||
height: 16px;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--margin-xs);
|
||||
|
||||
> button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.btn () {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
line-height: 16px;
|
||||
font-size: var(--font-size-lg);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-super {
|
||||
&-prev,
|
||||
&-next {
|
||||
&-btn {
|
||||
.btn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next {
|
||||
&-btn {
|
||||
.btn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
&-cell {
|
||||
color: #aaa;
|
||||
|
||||
&-disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: @cell-size;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: @cell-size;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--border-radius-base);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
&-in-view {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&-in-range > &-inner {
|
||||
background: fade(blue, 5%);
|
||||
}
|
||||
|
||||
&-hover > &-inner {
|
||||
background: rgb(var(--bg-color));
|
||||
}
|
||||
|
||||
&-range-hover-start,
|
||||
&-range-hover-end,
|
||||
&-range-hover {
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 1px solid green;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-range-hover-start::after {
|
||||
border-left: 1px solid green !important;
|
||||
}
|
||||
&-range-hover-end::after {
|
||||
border-right: 1px solid green !important;
|
||||
}
|
||||
|
||||
&-today > &-inner {
|
||||
border: 1px solid rgb(var(--primary-color));
|
||||
}
|
||||
&-range-start > &-inner,
|
||||
&-range-end > &-inner,
|
||||
&-selected > &-inner {
|
||||
// TODO:
|
||||
// background: fade(blue, 20%);
|
||||
color: #fff;
|
||||
background: rgb(var(--primary-color));
|
||||
}
|
||||
}
|
||||
|
||||
// Preset
|
||||
&-presets {
|
||||
background: #ccccff;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-now {
|
||||
padding-top: var(--padding-base);
|
||||
|
||||
&-btn {
|
||||
font-size: var(--font-size-xs);
|
||||
color: rgb(var(--primary-color));
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer,
|
||||
&-picker-footer {
|
||||
margin-top: var(--margin-sm);
|
||||
border-top: 1px solid rgb(var(--border-color));
|
||||
}
|
||||
|
||||
&-ranges {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-ok {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&-decade-panel {
|
||||
.@{prefix-cls}-content {
|
||||
tbody {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: 78px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// ================== Year & Month Panel ==================
|
||||
&-year-panel,
|
||||
&-month-panel {
|
||||
.@{prefix-cls}-content {
|
||||
tbody {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Week Panel ======================
|
||||
&-week-panel {
|
||||
&-row {
|
||||
&:hover {
|
||||
.@{prefix-cls}-cell {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
|
||||
&-selected {
|
||||
.@{prefix-cls}-cell {
|
||||
background: rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&-range {
|
||||
&-hover {
|
||||
.@{prefix-cls}-cell {
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&-start,
|
||||
&-end {
|
||||
.@{prefix-cls}-cell {
|
||||
background: rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell,
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: @cell-size;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell-week {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner,
|
||||
.@{prefix-cls}-cell-selected > .@{prefix-cls}-cell-inner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Date Panel ======================
|
||||
&-date-panel {
|
||||
.@{prefix-cls}-cell-inner {
|
||||
width: @cell-size;
|
||||
height: @cell-size;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Time Panel ======================
|
||||
&-time-panel {
|
||||
width: auto;
|
||||
|
||||
.@{prefix-cls}-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-height: 200px;
|
||||
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: @time-panel-padding-top;
|
||||
// right: -5px;
|
||||
// left: -5px;
|
||||
// height: 20px;
|
||||
// background: rgba(255, 0, 0, 0.05);
|
||||
// content: '';
|
||||
// pointer-events: none;
|
||||
// }
|
||||
}
|
||||
|
||||
// &-column-holder {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
&-column-title {
|
||||
font-size: 14px;
|
||||
line-height: @cell-size;
|
||||
}
|
||||
|
||||
&-column {
|
||||
flex: auto;
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
// padding: 0 0 180px 0;
|
||||
padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top);
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
transition: background 0.3s;
|
||||
|
||||
&-active {
|
||||
background: rgba(0, 0, 255, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
> li {
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.@{prefix-cls}-time-panel-cell {
|
||||
&-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
background: rgba(0, 0, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-time-panel-cell-inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @cell-size;
|
||||
margin: 0;
|
||||
// padding: 0 0 0 12px;
|
||||
color: #333;
|
||||
line-height: @cell-size;
|
||||
text-align: center;
|
||||
|
||||
.@{prefix-cls}-panel-rtl & {
|
||||
padding: 0 12px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Date Time =======================
|
||||
&-datetime-panel {
|
||||
display: flex;
|
||||
|
||||
.@{prefix-cls}-time-panel {
|
||||
border-left: 1px solid #999;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-date-panel,
|
||||
.@{prefix-cls}-time-panel {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
// Keyboard
|
||||
&-active {
|
||||
.@{prefix-cls}-date-panel,
|
||||
.@{prefix-cls}-time-panel {
|
||||
opacity: 0.3;
|
||||
|
||||
&-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Input =========================
|
||||
&-input {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
|
||||
.@{prefix-cls}-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-active {
|
||||
> input {
|
||||
background: rgba(0, 0, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
box-sizing: border-box;
|
||||
.placeholder();
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
> input {
|
||||
color: @input-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-clear {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.@{prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
background-color: rgb(var(--grey-500));
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '×';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================= Dropdown =======================
|
||||
&-dropdown {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
||||
&-range {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Panel
|
||||
@arrow-size: 10px;
|
||||
|
||||
&-placement-topLeft,
|
||||
&-placement-topRight {
|
||||
.@{prefix-cls}-range-arrow {
|
||||
bottom: (@arrow-size / 2 + 1px);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
&-placement-bottomLeft,
|
||||
&-placement-bottomright {
|
||||
.@{prefix-cls}-range-arrow {
|
||||
top: (@arrow-size / 2 + 1px);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}-range-arrow {
|
||||
position: absolute;
|
||||
left: @arrow-size;
|
||||
z-index: 1;
|
||||
width: @arrow-size;
|
||||
height: @arrow-size;
|
||||
margin-left: 10px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{prefix-cls}-dropdown-rtl& {
|
||||
right: @arrow-size;
|
||||
left: auto;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-sizing: border-box;
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
|
||||
.@{prefix-cls}-dropdown-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: @arrow-size;
|
||||
height: @arrow-size;
|
||||
border: (@arrow-size / 2) solid blue;
|
||||
border-color: blue blue transparent transparent;
|
||||
}
|
||||
&::after {
|
||||
width: @arrow-size - 2px;
|
||||
height: @arrow-size - 2px;
|
||||
border: (@arrow-size - 2px) / 2 solid blue;
|
||||
border-color: @background-color @background-color transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// = Range Picker =
|
||||
// ========================================================
|
||||
&-range {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.@{prefix-cls}-active-bar {
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background: rgb(var(--primary-color));
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.@{prefix-cls}-focused {
|
||||
.@{prefix-cls}-active-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-separator {
|
||||
height: 100%;
|
||||
color: rgb(var(--text-color-tertiary));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-panel-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transition: margin 0.3s;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
&-panel-layout {
|
||||
padding: var(--padding-lg);
|
||||
background: rgb(var(--bg-color-secondary));
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// = Overflow =
|
||||
// ========================================================
|
||||
&-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-selection-overflow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid green;
|
||||
|
||||
&-item {
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-selection-item {
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
&-multiple-input {
|
||||
width: 10px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
@@ -16,11 +16,11 @@
|
||||
|
||||
import type { ActionType, AlignType } from '@rc-component/trigger';
|
||||
import type Placements from 'rc-dropdown/lib/placements';
|
||||
import type { ReactElement } from 'react';
|
||||
import RcDropdown from 'rc-dropdown';
|
||||
import React, { useContext } from 'react';
|
||||
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider/ConfigProvider';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
|
||||
export interface IDropdownLegacyProps {
|
||||
/** Semantic DOM class */
|
||||
@@ -29,7 +29,7 @@ export interface IDropdownLegacyProps {
|
||||
/**
|
||||
* The dropdown content
|
||||
*/
|
||||
children: React.ReactElement;
|
||||
children: ReactElement;
|
||||
|
||||
/**
|
||||
* Whether the dropdown is visible
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-slide-up-enter,
|
||||
.dropdown-slide-up-appear {
|
||||
transform-origin: 0 0;
|
||||
display: block !important;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
|
||||
.dropdown-slide-up-leave {
|
||||
transform-origin: 0 0;
|
||||
display: block !important;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 1;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-bottomLeft,
|
||||
.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-bottomLeft,
|
||||
.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-bottomCenter,
|
||||
.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-bottomCenter,
|
||||
.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-bottomRight,
|
||||
.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-bottomRight {
|
||||
animation-name: dropdown-slide-up-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-topLeft,
|
||||
.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-topLeft,
|
||||
.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-topCenter,
|
||||
.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-topCenter,
|
||||
.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-topRight,
|
||||
.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-topRight {
|
||||
animation-name: dropdown-slide-down-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-bottomLeft,
|
||||
.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-bottomCenter,
|
||||
.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-bottomRight {
|
||||
animation-name: dropdown-slide-up-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-topLeft,
|
||||
.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-topCenter,
|
||||
.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-topRight {
|
||||
animation-name: dropdown-slide-down-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-down-in {
|
||||
0% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-down-out {
|
||||
0% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
|
||||
display: block;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.effect() {
|
||||
transform-origin: 0 0;
|
||||
display: block !important;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-slide-up-enter,
|
||||
&-slide-up-appear {
|
||||
.effect();
|
||||
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
.effect();
|
||||
|
||||
opacity: 1;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft,
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomCenter,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomCenter,
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomRight,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomRight {
|
||||
animation-name: dropdown-slide-up-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topLeft,
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topCenter,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topCenter,
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topRight,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topRight {
|
||||
animation-name: dropdown-slide-down-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft,
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomCenter,
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomRight {
|
||||
animation-name: dropdown-slide-up-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topLeft,
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topCenter,
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topRight {
|
||||
animation-name: dropdown-slide-down-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-down-in {
|
||||
0% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-slide-down-out {
|
||||
0% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -14,21 +14,19 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
|
||||
import { MoreUpSingle } from '@univerjs/icons';
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import { createContext, useState } from 'react';
|
||||
import { clsx } from '../../helper/clsx';
|
||||
|
||||
import styles from './index.module.less';
|
||||
|
||||
export interface IFormLayoutProps {
|
||||
label?: React.ReactNode;
|
||||
desc?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
label?: ReactNode;
|
||||
desc?: ReactNode;
|
||||
children?: ReactNode;
|
||||
|
||||
style?: React.CSSProperties;
|
||||
style?: CSSProperties;
|
||||
className?: string;
|
||||
contentStyle?: React.CSSProperties;
|
||||
contentStyle?: CSSProperties;
|
||||
error?: string;
|
||||
collapsable?: boolean;
|
||||
defaultCollapsed?: boolean;
|
||||
@@ -39,22 +37,27 @@ const FormLayoutContext = createContext(false);
|
||||
export const FormLayout = (props: IFormLayoutProps) => {
|
||||
const { label, desc, children, style, className, error, contentStyle, collapsable = false, defaultCollapsed = false } = props;
|
||||
const [collapsed, setCollapsed] = useState(defaultCollapsed);
|
||||
const isInner = useContext(FormLayoutContext);
|
||||
|
||||
return (
|
||||
<FormLayoutContext.Provider value>
|
||||
<div className={clsx(styles.formLayout, isInner ? styles.formLayoutInner : '', className)} style={style}>
|
||||
<div data-u-comp="form-layout" className={clsx('univer-mb-3 univer-flex univer-flex-col', className)} style={style}>
|
||||
{label && (
|
||||
<div style={{ cursor: collapsable ? 'pointer' : 'default' }} className={styles.formLayoutLabel} onClick={() => setCollapsed(!collapsed)}>
|
||||
<div
|
||||
className={clsx(`
|
||||
univer-mb-2 univer-flex univer-min-h-3.5 univer-items-center univer-text-sm
|
||||
univer-text-gray-900
|
||||
`, {
|
||||
'univer-cursor-pointer': collapsable,
|
||||
})}
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
>
|
||||
{label}
|
||||
{collapsable
|
||||
? (
|
||||
<MoreUpSingle
|
||||
style={{
|
||||
marginLeft: 4,
|
||||
transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
transition: 'transform 0.3s',
|
||||
}}
|
||||
className={clsx('univer-ml-1 univer-transition-transform', {
|
||||
'univer-rotate-180': collapsed,
|
||||
})}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
@@ -64,14 +67,24 @@ export const FormLayout = (props: IFormLayoutProps) => {
|
||||
? null
|
||||
: (
|
||||
<>
|
||||
{desc && <div className={styles.formLayoutDesc}>{desc}</div>}
|
||||
{desc && <div className="univer-mt-1 univer-text-[13px] univer-text-gray-600">{desc}</div>}
|
||||
{children
|
||||
? (
|
||||
<div style={contentStyle} className={clsx(styles.formLayoutContent, error ? styles.formLayoutContentError : '')}>
|
||||
<div
|
||||
className={clsx(`
|
||||
[&_[data-u-comp=input]]:univer-w-full
|
||||
[&_[data-u-comp=select]]:univer-w-full
|
||||
last:univer-mb-0
|
||||
`, {
|
||||
'[&_[data-u-comp=input]]:univer-border-red-500': error,
|
||||
'[&_[data-u-comp=select]]:univer-border-red-500': error,
|
||||
})}
|
||||
style={contentStyle}
|
||||
>
|
||||
{children}
|
||||
{error
|
||||
? (
|
||||
<div className={styles.formLayoutError}>
|
||||
<div className="univer-mt-1 univer-text-xs univer-text-red-500">
|
||||
{error}
|
||||
</div>
|
||||
)
|
||||
@@ -94,7 +107,13 @@ export type IFormDualColumnLayoutProps = PropsWithChildren;
|
||||
*/
|
||||
export const FormDualColumnLayout = (props: IFormDualColumnLayoutProps) => {
|
||||
return (
|
||||
<div className={styles.formDualColumnLayout}>
|
||||
<div
|
||||
className={`
|
||||
univer-flex univer-justify-between
|
||||
[&_[data-u-comp=form-layout]]:univer-max-w-[calc(50%-8px)] [&_[data-u-comp=form-layout]]:univer-shrink
|
||||
[&_[data-u-comp=form-layout]]:univer-grow
|
||||
`}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
.form-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: var(--margin-sm);
|
||||
|
||||
&-label {
|
||||
font-size: var(--font-size-sm);
|
||||
min-height: var(--font-size-sm);
|
||||
color: rgba(var(--color-black));
|
||||
margin-bottom: var(--margin-xs);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
margin-top: var(--margin-xxs);
|
||||
font-size: var(--font-size-xs);
|
||||
color: rgba(var(--grey-500));
|
||||
}
|
||||
|
||||
&-content {
|
||||
.input-affix-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.range-selector {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-content-error {
|
||||
.input-affix-wrapper {
|
||||
border: 1px solid rgba(var(--red-400));
|
||||
}
|
||||
|
||||
.select-single:not(.select-customize-input) .select-selector {
|
||||
border: 1px solid rgba(var(--red-400));
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
color: rgba(var(--red-400));
|
||||
font-size: var(--font-size-xxs);
|
||||
margin-top: var(--margin-xxs);
|
||||
}
|
||||
}
|
||||
|
||||
.form-dual-column-layout {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.form-layout {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
max-width: calc(50% - 8px);
|
||||
}
|
||||
}
|
||||
@@ -118,6 +118,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
|
||||
|
||||
return (
|
||||
<div
|
||||
data-u-comp="input"
|
||||
className={clsx(
|
||||
'univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md',
|
||||
disabled && 'univer-cursor-not-allowed',
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
.input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
color: rgb(var(--text-color));
|
||||
|
||||
&::selection {
|
||||
color: rgb(var(--color-white));
|
||||
background-color: rgb(var(--primary-color));
|
||||
}
|
||||
|
||||
// &-out-of-range {
|
||||
// color: rgb(var(--error-color));
|
||||
// }
|
||||
|
||||
&-affix-wrapper {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
transition: all 0.15s;
|
||||
|
||||
&-small {
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
&-middle {
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
&-large {
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
border-color: rgb(var(--primary-color));
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
border-color: rgb(var(--border-color));
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
background-color: rgb(var(--bg-color-secondary));
|
||||
|
||||
&[disabled] {
|
||||
cursor: inherit;
|
||||
color: rgb(var(--grey-200));
|
||||
background-color: rgb(var(--bg-color-secondary));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-suffix {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 100%;
|
||||
padding: 0 var(--padding-sm);
|
||||
|
||||
background-color: rgb(var(--bg-color-secondary));
|
||||
}
|
||||
|
||||
&-not-allow-clear {
|
||||
.input-suffix {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-clear-icon {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-slot-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
> span {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-slot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 8px;
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -20,7 +20,7 @@ import React, { useContext } from 'react';
|
||||
import { clsx } from '../../helper/clsx';
|
||||
import { ConfigContext } from '../config-provider/ConfigProvider';
|
||||
import { Tooltip } from '../tooltip';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
|
||||
/** @deprecated */
|
||||
export const Menu = React.forwardRef<MenuRef, MenuProps & { wrapperClass?: string }>((props, ref) => {
|
||||
@@ -76,16 +76,16 @@ export function TinyMenuGroup({ items }: ITinyMenuGroupProps) {
|
||||
const ele = (
|
||||
<div
|
||||
key={item.key}
|
||||
onClick={() => item.onClick()}
|
||||
className={`
|
||||
univer-flex univer-h-6 univer-w-6 univer-cursor-pointer univer-items-center
|
||||
univer-justify-center univer-rounded-md
|
||||
hover:univer-bg-[#EEEFF1]
|
||||
${item.active ? 'univer-bg-[#EEEFF1]' : ''}
|
||||
univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center
|
||||
univer-rounded-md
|
||||
hover:univer-bg-gray-50
|
||||
${item.active ? 'univer-bg-gray-50' : ''}
|
||||
${item.className}
|
||||
`}
|
||||
onClick={() => item.onClick()}
|
||||
>
|
||||
<item.Icon className="univer-h-4 univer-w-4 univer-text-[#181C2A]" />
|
||||
<item.Icon className="univer-size-4 univer-text-gray-900" />
|
||||
</div>
|
||||
);
|
||||
return item.tooltip
|
||||
|
||||
@@ -0,0 +1,304 @@
|
||||
.menu {
|
||||
@apply univer-m-0 univer-py-1 univer-px-2 univer-text-sm univer-list-none univer-rounded-md univer-box-border univer-shadow-md univer-border-solid univer-border univer-border-gray-200 univer-min-w-52 univer-max-w-52 univer-bg-white;
|
||||
}
|
||||
|
||||
.menu-vertical {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.menu-hidden,
|
||||
.menu-submenu-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item-group {
|
||||
@apply univer-py-1;
|
||||
}
|
||||
|
||||
.menu-item-group:not(:last-child) {
|
||||
border-bottom: 1px solid #e3e5ea;
|
||||
}
|
||||
|
||||
.menu-item-group-list {
|
||||
display: grid;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@apply univer-gap-1;
|
||||
}
|
||||
|
||||
.menu-item-group-title {
|
||||
font-weight: 600;
|
||||
line-height: 1.5em;
|
||||
padding: 4px;
|
||||
padding-top: 6px;
|
||||
@apply univer-text-gray-600 univer-text-xs univer-px-2;
|
||||
}
|
||||
|
||||
.menu-item-group-title:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item-active,
|
||||
.menu-submenu-active {
|
||||
@apply univer-bg-gray-50 univer-rounded-md;
|
||||
}
|
||||
|
||||
.menu-item-selected {
|
||||
transform: translateZ(0);
|
||||
@apply univer-bg-gray-50 univer-rounded-md;
|
||||
}
|
||||
|
||||
.menu-submenu-selected {
|
||||
@apply univer-bg-gray-50 univer-rounded-md;
|
||||
}
|
||||
|
||||
.menu > li.menu-submenu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-horizontal-sub,
|
||||
.menu-vertical-sub,
|
||||
.menu-vertical-left-sub,
|
||||
.menu-vertical-right-sub {
|
||||
min-width: 160px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
line-height: 1.5em;
|
||||
@apply univer-rounded-md univer-text-sm univer-text-gray-900 univer-px-2 univer-gap-3;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
@apply univer-bg-gray-50;
|
||||
}
|
||||
|
||||
.menu-item .icon {
|
||||
@apply univer-text-gray-600;
|
||||
}
|
||||
|
||||
.menu-item,
|
||||
.menu-submenu {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.menu-item.menu-item-disabled,
|
||||
.menu-submenu.menu-submenu-disabled {
|
||||
cursor: not-allowed;
|
||||
@apply !univer-text-gray-400;
|
||||
}
|
||||
|
||||
.menu-submenu-popup {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
}
|
||||
|
||||
.menu-submenu-popup .submenu-title-wrapper {
|
||||
@apply univer-pr-5;
|
||||
}
|
||||
|
||||
.menu-submenu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
min-height: 32px;
|
||||
line-height: 1.5em;
|
||||
@apply univer-text-gray-900 univer-text-sm univer-px-2;
|
||||
}
|
||||
|
||||
.menu-submenu-title-more-icon,
|
||||
.menu-item-more-icon {
|
||||
@apply univer-text-gray-400 univer-text-sm univer-ml-2;
|
||||
}
|
||||
|
||||
.menu-horizontal {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border: none;
|
||||
border-bottom: 1px solid #e3e5ea;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu-horizontal > .menu-item,
|
||||
.menu-horizontal > .menu-submenu > .menu-submenu-title {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.menu-horizontal > .menu-submenu,
|
||||
.menu-horizontal > .menu-item {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.menu-vertical,
|
||||
.menu-vertical-left,
|
||||
.menu-vertical-right,
|
||||
.menu-inline {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-vertical > .menu-item,
|
||||
.menu-vertical > .menu-submenu > .menu-submenu-title,
|
||||
.menu-vertical-left > .menu-item,
|
||||
.menu-vertical-left > .menu-submenu > .menu-submenu-title,
|
||||
.menu-vertical-right > .menu-item,
|
||||
.menu-vertical-right > .menu-submenu > .menu-submenu-title,
|
||||
.menu-inline > .menu-item,
|
||||
.menu-inline > .menu-submenu > .menu-submenu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
@apply univer-p-1;
|
||||
}
|
||||
|
||||
.menu-vertical .menu-submenu-arrow,
|
||||
.menu-vertical-left .menu-submenu-arrow,
|
||||
.menu-vertical-right .menu-submenu-arrow,
|
||||
.menu-inline .menu-submenu-arrow {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.menu-sub-inline {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu-sub-inline > .menu-item,
|
||||
.menu-sub-inline > .menu-submenu > .menu-submenu-title {
|
||||
padding-top: 8px;
|
||||
padding-right: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.menu-open-slide-up-enter,
|
||||
.menu-open-slide-up-appear {
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.menu-open-slide-up-leave {
|
||||
opacity: 1;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.menu-open-slide-up-enter.menu-open-slide-up-enter-active,
|
||||
.menu-open-slide-up-appear.menu-open-slide-up-appear-active {
|
||||
animation-name: menu-open-slide-up-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.menu-open-slide-up-leave.menu-open-slide-up-leave-active {
|
||||
animation-name: menu-open-slide-up-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes menu-open-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-open-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-open-zoom-enter,
|
||||
.menu-open-zoom-appear {
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.menu-open-zoom-leave {
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.menu-open-zoom-enter.menu-open-zoom-enter-active,
|
||||
.menu-open-zoom-appear.menu-open-zoom-appear-active {
|
||||
animation-name: menu-open-zoom-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.menu-open-zoom-leave.menu-open-zoom-leave-active {
|
||||
animation-name: menu-open-zoom-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes menu-open-zoom-in {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-open-zoom-out {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,334 +0,0 @@
|
||||
.menu {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: var(--padding-xs) var(--padding-sm);
|
||||
|
||||
font-size: var(--font-size-xs);
|
||||
list-style: none;
|
||||
|
||||
background-color: rgb(var(--bg-color-secondary));
|
||||
border-radius: var(--border-radius-xl);
|
||||
outline: none;
|
||||
box-shadow: var(--box-shadow-lg);
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
min-width: 212px;
|
||||
|
||||
&-vertical {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
&-hidden,
|
||||
&-submenu-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-group {
|
||||
padding: var(--padding-xs) 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid rgb(var(--border-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item-group-list {
|
||||
display: grid;
|
||||
gap: var(--margin-xxs);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
padding: 0 var(--padding-sm);
|
||||
color: rgb(var(--grey-500));
|
||||
font-size: var(--font-size-xxs);
|
||||
font-weight: 600;
|
||||
line-height: 1.5em;
|
||||
padding: 4px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
&-item-group-title:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-item-active,
|
||||
&-submenu-active {
|
||||
background-color: rgb(var(--bg-color-hover-light));
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
&-item-selected {
|
||||
// fix chrome render bug
|
||||
transform: translateZ(0);
|
||||
background-color: rgb(var(--bg-color-hover-light));
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
&-submenu-selected {
|
||||
background-color: rgb(var(--bg-color-hover-light));
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
& > li&-submenu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-horizontal&-sub,
|
||||
&-vertical&-sub,
|
||||
&-vertical-left&-sub,
|
||||
&-vertical-right&-sub {
|
||||
min-width: 160px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
gap: var(--margin-sm);
|
||||
align-items: center;
|
||||
padding: 0 var(--padding-sm);
|
||||
min-height: 32px;
|
||||
color: rgb(var(--text-color));
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.5em;
|
||||
border-radius: var(--border-radius-lg);
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(var(--bg-color-hover-light));
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: rgb(var(--text-color-secondary));
|
||||
}
|
||||
}
|
||||
|
||||
&-item,
|
||||
&-submenu {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&.menu-item-disabled,
|
||||
&.menu-submenu-disabled {
|
||||
color: rgb(var(--text-color-tertiary)) !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-submenu {
|
||||
&-popup {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
|
||||
.submenu-title-wrapper {
|
||||
padding-right: var(--padding-xl);
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 var(--padding-sm);
|
||||
min-height: 32px;
|
||||
color: rgb(var(--text-color));
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-submenu-title,
|
||||
.menu-item {
|
||||
&-more-icon {
|
||||
margin-left: var(--margin-xs);
|
||||
font-size: var(--font-size-sm);
|
||||
color: rgb(var(--text-color-secondary));
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
overflow: hidden;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
border: none;
|
||||
border-bottom: 1px solid rgb(var(--border-color));
|
||||
box-shadow: none;
|
||||
|
||||
& > .menu-item,
|
||||
& > .menu-submenu > .menu-submenu-title {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
& > .menu-submenu,
|
||||
& > .menu-item {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-vertical-left,
|
||||
&-vertical-right,
|
||||
&-inline {
|
||||
& > .menu-item,
|
||||
& > .menu-submenu > .menu-submenu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
padding: var(--padding-xs);
|
||||
}
|
||||
|
||||
.menu-submenu-arrow {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
font-size: inherit;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
&-sub&-inline {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
& > .menu-item,
|
||||
& > .menu-submenu > .menu-submenu-title {
|
||||
padding-top: 8px;
|
||||
padding-right: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.effect() {
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-open {
|
||||
&-slide-up-enter,
|
||||
&-slide-up-appear {
|
||||
.effect();
|
||||
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
.effect();
|
||||
|
||||
opacity: 1;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active,
|
||||
&-slide-up-appear&-slide-up-appear-active {
|
||||
animation-name: menu-open-slide-up-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active {
|
||||
animation-name: menu-open-slide-up-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes menu-open-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-open-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-enter,
|
||||
&-zoom-appear {
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
.effect();
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
.effect();
|
||||
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
&-zoom-enter&-zoom-enter-active,
|
||||
&-zoom-appear&-zoom-appear-active {
|
||||
animation-name: menu-open-zoom-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-zoom-leave&-zoom-leave-active {
|
||||
animation-name: menu-open-zoom-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes menu-open-zoom-in {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-open-zoom-out {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -14,15 +14,15 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import { useContext, useEffect, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
|
||||
import { ConfigContext } from '../config-provider/ConfigProvider';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
|
||||
export interface IPopupProps {
|
||||
children: React.ReactElement;
|
||||
children: ReactElement;
|
||||
|
||||
/**
|
||||
* whether popup is visible
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
.popup {
|
||||
position: fixed;
|
||||
z-index: 1070;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
@apply univer-shadow;
|
||||
}
|
||||
|
||||
.popup-enter {
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
|
||||
.popup-enter-active {
|
||||
animation-name: popup-slide-up-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.popup-exit {
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 1;
|
||||
animation-name: popup-slide-up-out;
|
||||
animation-play-state: running;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
.popup-exit-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes popup-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
z-index: 1060;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
.popup {
|
||||
position: fixed;
|
||||
z-index: 1070;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
// background-color: rgb(var(--bg-color-secondary));
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--box-shadow-base);
|
||||
|
||||
&-enter {
|
||||
.effect();
|
||||
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
animation-name: popup-slide-up-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
.effect();
|
||||
|
||||
opacity: 1;
|
||||
animation-name: popup-slide-up-out;
|
||||
animation-play-state: running;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
&-exit-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.effect() {
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes popup-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
z-index: 1060;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
@segmented-prefix-cls: segmented;
|
||||
|
||||
.segmented-disabled-item() {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: fade(#000, 25%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.segmented-item-selected() {
|
||||
background-color: white;
|
||||
box-shadow: 0px 4px 16px 0px rgba(var(--color-black), 0.08);
|
||||
}
|
||||
|
||||
.@{segmented-prefix-cls} {
|
||||
display: inline-flex;
|
||||
padding: 2px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
background-color: rgb(var(--grey-50));
|
||||
box-sizing: border-box;
|
||||
|
||||
&-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-items: flex-start;
|
||||
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
color: rgba(var(--color-black));
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
|
||||
&-selected {
|
||||
.segmented-item-selected();
|
||||
color: rgba(var(--color-black));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(var(--color-black));
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.segmented-disabled-item();
|
||||
}
|
||||
|
||||
&-label {
|
||||
z-index: 2;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// disabled styles
|
||||
&-disabled &-item,
|
||||
&-disabled &-item:hover,
|
||||
&-disabled &-item:focus {
|
||||
.segmented-disabled-item();
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
.segmented-item-selected();
|
||||
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
// transition effect when `enter-active`
|
||||
&-thumb-motion-appear-active,
|
||||
&-thumb-motion-enter-active {
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ import RcSelect from 'rc-select';
|
||||
import { useContext } from 'react';
|
||||
import { clsx } from '../../helper/clsx';
|
||||
import { ConfigContext } from '../config-provider/ConfigProvider';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
|
||||
/** @deprecated */
|
||||
interface ILegacyOption {
|
||||
|
||||
@@ -154,6 +154,7 @@ export function Select(props: ISelectProps) {
|
||||
onOpenChange={handleOpenChange}
|
||||
>
|
||||
<div
|
||||
data-u-comp="select"
|
||||
className={clsx(`
|
||||
univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-cursor-pointer
|
||||
univer-items-center univer-justify-between univer-gap-2 univer-rounded-lg univer-border
|
||||
|
||||
@@ -0,0 +1,323 @@
|
||||
.select {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.select-disabled,
|
||||
.select-disabled input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.select-disabled .select-selector {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.select-show-arrow.select-loading .select-arrow-icon::after {
|
||||
transform: none;
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: 4px;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 100%;
|
||||
animation: select-loading-icon 0.5s infinite;
|
||||
@apply univer-border-2 univer-border-solid univer-border-gray-200;
|
||||
}
|
||||
|
||||
.select-selection-placeholder {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.select-selection-search-input {
|
||||
appearance: none;
|
||||
@apply univer-text-gray-900 univer-text-sm;
|
||||
}
|
||||
|
||||
.select-selection-search-input::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.select-single .select-selector {
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.select-single .select-selection-search {
|
||||
width: 100%;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.select-single .select-selection-search-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select-single .select-selection-item,
|
||||
.select-single .select-selection-placeholder {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 18px 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 28px;
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
@apply univer-text-sm;
|
||||
}
|
||||
|
||||
.select-single:not(.select-customize-input) .select-selector {
|
||||
@apply univer-border univer-border-solid univer-border-gray-200 univer-rounded;
|
||||
}
|
||||
|
||||
.select-single:not(.select-customize-input) .select-selection-search-input {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select-multiple .select-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@apply univer-border univer-border-solid univer-border-gray-200 univer-rounded;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-item {
|
||||
flex: none;
|
||||
margin-right: 2px;
|
||||
padding: 0 8px;
|
||||
background: #bbb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-item-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-overflow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-overflow-item {
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-search {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-search-input,
|
||||
.select-multiple .select-selection-search-mirror {
|
||||
box-sizing: border-box;
|
||||
@apply univer-px-2 univer-py-1;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-search-mirror {
|
||||
position: none;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.select-multiple .select-selection-search-input {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select-borderless:not(.select-customize-input) .select-selector {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.select-borderless.select-focused .select-selector,
|
||||
.select-borderless:hover .select-selector {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.select-allow-clear.select-multiple .select-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.select-allow-clear .select-clear {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.select-show-arrow.select-multiple .select-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.select-show-arrow .select-arrow {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
@apply univer-text-gray-600 univer-text-xs univer-right-3;
|
||||
}
|
||||
|
||||
.select-show-arrow .select-arrow-icon::after {
|
||||
content: '';
|
||||
transform: translateY(5px);
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
@apply univer-border-t-gray-200;
|
||||
}
|
||||
|
||||
.select-focused .select-selector,
|
||||
.select:hover .select-selector {
|
||||
@apply !univer-border-primary-600;
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
@apply univer-bg-white univer-border univer-border-solid univer-border-gray-200 univer-rounded univer-shadow;
|
||||
}
|
||||
|
||||
.select-dropdown-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
cursor: pointer;
|
||||
@apply univer-py-2 univer-px-3 univer-text-sm;
|
||||
}
|
||||
|
||||
.select-item-group {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select-item-group:not(:first-child) {
|
||||
@apply univer-border-0 univer-border-t univer-border-t-gray-200 univer-border-solid;
|
||||
}
|
||||
|
||||
.select-item-option {
|
||||
position: relative;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.select-item-option .select-item-option-state {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.select-item-option-active {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.select-item-option-disabled {
|
||||
@apply univer-text-gray-400;
|
||||
}
|
||||
|
||||
.select-item-empty {
|
||||
text-align: center;
|
||||
@apply univer-text-gray-400 univer-text-sm univer-py-1;
|
||||
}
|
||||
|
||||
.select-selection__choice-zoom {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.select-selection__choice-zoom-appear {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.select-selection__choice-zoom-appear-active {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.select-selection__choice-zoom-leave {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.select-selection__choice-zoom-leave-active {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.select-dropdown-slide-up-enter,
|
||||
.select-dropdown-slide-up-appear {
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
|
||||
.select-dropdown-slide-up-leave {
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 1;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
@keyframes select-dropdown-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes select-dropdown-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes select-loading-icon {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,464 +0,0 @@
|
||||
@select-prefix: ~'select';
|
||||
|
||||
.search-input-without-border() {
|
||||
.@{select-prefix}-selection-search-input {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&-disabled {
|
||||
&,
|
||||
& input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{select-prefix}-selector {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&-show-arrow&-loading {
|
||||
.@{select-prefix}-arrow {
|
||||
&-icon::after {
|
||||
transform: none;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: 4px;
|
||||
|
||||
border: 2px solid rgb(var(--border-color));
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 100%;
|
||||
|
||||
animation: select-loading-icon 0.5s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Selector ===============
|
||||
.@{select-prefix}-selection-placeholder {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
// ============== Search ===============
|
||||
.@{select-prefix}-selection-search-input {
|
||||
font-size: var(--font-size-sm);
|
||||
color: rgb(var(--text-color));
|
||||
appearance: none;
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------- Single ----------------
|
||||
&-single {
|
||||
.@{select-prefix}-selector {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
|
||||
transition: all 0.15s;
|
||||
|
||||
.@{select-prefix}-selection-search {
|
||||
width: 100%;
|
||||
line-height: 0;
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection-item,
|
||||
.@{select-prefix}-selection-placeholder {
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 18px 0 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 28px;
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Not customize
|
||||
&:not(.@{select-prefix}-customize-input) {
|
||||
.@{select-prefix}-selector {
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
.search-input-without-border();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -------------- Multiple ---------------
|
||||
&-multiple .@{select-prefix}-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
.@{select-prefix}-selection-item {
|
||||
flex: none;
|
||||
|
||||
margin-right: 2px;
|
||||
padding: 0 8px;
|
||||
|
||||
background: #bbb;
|
||||
border-radius: 4px;
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection-overflow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection-search {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
|
||||
&-input,
|
||||
&-mirror {
|
||||
box-sizing: border-box;
|
||||
padding: var(--padding-xs) var(--padding-sm);
|
||||
}
|
||||
|
||||
&-mirror {
|
||||
position: none;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-without-border();
|
||||
}
|
||||
|
||||
&-borderless {
|
||||
&:not(.@{select-prefix}-customize-input) {
|
||||
.@{select-prefix}-selector {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{select-prefix} {
|
||||
// =============== Focused ===============
|
||||
&-focused,
|
||||
&:hover {
|
||||
.@{select-prefix}-selector {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ================ Icons ================
|
||||
&-allow-clear {
|
||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-clear {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-show-arrow {
|
||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-arrow {
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: var(--margin-sm);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 100%;
|
||||
|
||||
font-size: var(--font-size-xxs);
|
||||
color: rgb(var(--text-color-secondary));
|
||||
|
||||
&-icon::after {
|
||||
content: '';
|
||||
|
||||
transform: translateY(5px);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border: 5px solid transparent;
|
||||
border-top-color: rgb(var(--border-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Focused ===============
|
||||
&-focused,
|
||||
&:hover {
|
||||
.@{select-prefix}-selector {
|
||||
border-color: rgb(var(--primary-color)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Dropdown ===============
|
||||
&-dropdown {
|
||||
position: absolute;
|
||||
|
||||
z-index: 1070;
|
||||
|
||||
background: rgb(var(--bg-color-secondary));
|
||||
border: 1px solid rgb(var(--border-color));
|
||||
border-radius: var(--border-radius-base);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Option ================
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
padding: var(--padding-sm) var(--padding-base);
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
// >>> Group
|
||||
&-group {
|
||||
// font-size: 80%;
|
||||
// font-weight: bold;
|
||||
// color: #999;
|
||||
padding: 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid rgb(var(--border-color));
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Option
|
||||
&-option {
|
||||
position: relative;
|
||||
transition: all 0.15s;
|
||||
|
||||
&-grouped {
|
||||
// padding-left: 24px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-item-option-state {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// ------- Active -------
|
||||
&-active {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
// ------ Disabled ------
|
||||
&-disabled {
|
||||
color: rgb(var(--text-color-tertiary));
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Empty
|
||||
&-empty {
|
||||
padding: var(--padding-xs) 0;
|
||||
color: rgb(var(--text-color-tertiary));
|
||||
font-size: var(--font-size-sm);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection__choice-zoom {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection__choice-zoom-appear {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
|
||||
&&-active {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.@{select-prefix}-selection__choice-zoom-leave {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
|
||||
&&-active {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.effect() {
|
||||
transform-origin: 0 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.@{select-prefix}-dropdown {
|
||||
&-slide-up-enter,
|
||||
&-slide-up-appear {
|
||||
.effect();
|
||||
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
.effect();
|
||||
|
||||
opacity: 1;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft,
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomRight,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomRight {
|
||||
animation-name: select-dropdown-slide-up-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft,
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomRight {
|
||||
animation-name: select-dropdown-slide-up-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topLeft,
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topRight,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topRight {
|
||||
animation-name: select-dropdown-slide-down-in;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topLeft,
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topRight {
|
||||
animation-name: select-dropdown-slide-down-out;
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes select-dropdown-slide-up-in {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes select-dropdown-slide-up-out {
|
||||
0% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes select-dropdown-slide-down-in {
|
||||
0% {
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes select-dropdown-slide-down-out {
|
||||
0% {
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes select-loading-icon {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -14,13 +14,14 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
import { DropdownSingle } from '@univerjs/icons';
|
||||
import VirtualList from 'rc-virtual-list';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { clsx } from '../../helper/clsx';
|
||||
import { Checkbox } from '../checkbox';
|
||||
import { Tooltip } from '../tooltip';
|
||||
import styles from './index.module.less';
|
||||
import styles from './index.module.css';
|
||||
import { createCacheWithFindNodePathFromTree, isIntermediated } from './util';
|
||||
|
||||
export enum TreeSelectionMode {
|
||||
@@ -58,11 +59,11 @@ export interface ITreeProps {
|
||||
|
||||
itemHeight?: number;
|
||||
|
||||
attachRender?: (node: ITreeItemProps) => React.ReactNode;
|
||||
attachRender?: (node: ITreeItemProps) => ReactNode;
|
||||
|
||||
treeNodeClassName?: string;
|
||||
|
||||
style?: React.CSSProperties;
|
||||
style?: CSSProperties;
|
||||
|
||||
defaultCache?: Map<string, string[]>;
|
||||
}
|
||||
@@ -115,10 +116,6 @@ export function Tree(props: ITreeProps) {
|
||||
|
||||
const flatData = useMemo(() => flattenTree(data, expandKeySet), [data, update, expandKeySet]);
|
||||
|
||||
function handleChange(treeItem: ITreeItemProps) {
|
||||
const path: string[] = findNode.findNodePathFromTreeWithCache(treeItem.key);
|
||||
}
|
||||
|
||||
function handleExpendItem(treeItem: ITreeItemProps) {
|
||||
if (treeItem.children?.length) {
|
||||
if (expandKeySet.has(treeItem.key)) {
|
||||
@@ -204,7 +201,6 @@ export function Tree(props: ITreeProps) {
|
||||
{(item: ITreeItemProps) => renderTreeItem(item)}
|
||||
</VirtualList>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
.tree {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
@apply univer-text-gray-900;
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(-1 * 16px);
|
||||
transform: translateY(-50%) rotateZ(-90deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.tree-icon-expand {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.tree-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tree-list .tree-list {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.tree-list .tree-list-expand {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.tree-list-item {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tree-list-item > a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tree-list-item-title {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: 0 4px;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tree-list-item-content {
|
||||
margin: 4px 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tree-list-item-content-selected-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(-1 * 20px);
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@apply univer-text-base;
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
.tree {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
color: rgb(var(--text-color));
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(-1 * var(--padding-lg));
|
||||
transform: translateY(-50%) rotateZ(-90deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 8px;
|
||||
|
||||
&-expand {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
height: 100%;
|
||||
|
||||
.tree-list {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
|
||||
&-expand {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
padding-left: var(--padding-xl);
|
||||
font-size: 13px;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: 0 4px;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin: 4px 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-selected {
|
||||
// font-weight: 500;
|
||||
// color: rgb(var(--primary-color));
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(-1 * var(--padding-xl));
|
||||
transform: translateY(-50%);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -45,7 +45,6 @@ export { type ITooltipProps, Tooltip } from './components/tooltip';
|
||||
export { filterLeafNode, findNodePathFromTree, findSubTreeFromPath, type ITreeNodeProps, type ITreeProps, mergeTreeSelected, Tree, TreeSelectionMode } from './components/tree';
|
||||
export { Switch } from './components/switch';
|
||||
export { type ILocale } from './locale/interface';
|
||||
export { defaultTheme, greenTheme, themeInstance } from './themes';
|
||||
export { DraggableList, type IDraggableListProps } from './components/draggable-list';
|
||||
export { clsx } from './helper/clsx';
|
||||
export { resizeObserverCtor } from './helper/resize-observer';
|
||||
@@ -57,3 +56,6 @@ export { DateRangePicker } from './components/date-range-picker';
|
||||
export { type IKBDProps, KBD } from './components/kbd';
|
||||
export { type IToasterProps, toast, Toaster } from './components/toaster/Toaster';
|
||||
export { scrollbarClassName } from './helper/scrollbar-cls';
|
||||
|
||||
/** @deprecated Only for compatibility with versions before 0.7.0, will be removed in future versions */
|
||||
export { defaultTheme, greenTheme } from '@univerjs/themes';
|
||||
|
||||
@@ -1,481 +0,0 @@
|
||||
/**
|
||||
* =====================================
|
||||
* Ramu / 瑞木 / Red
|
||||
* =====================================
|
||||
*/
|
||||
@red-50: #fee7e7;
|
||||
@red-100: #fdcece;
|
||||
@red-200: #fb9d9d;
|
||||
@red-300: #fa7979;
|
||||
@red-400: #fe4b4b;
|
||||
@red-500: #f30b0b;
|
||||
@red-600: #e30909;
|
||||
@red-700: #cd0f0f;
|
||||
@red-800: #b20000;
|
||||
@red-900: #9d0000;
|
||||
|
||||
:export {
|
||||
--red-50: @red-50;
|
||||
--red-100: @red-100;
|
||||
--red-200: @red-200;
|
||||
--red-300: @red-300;
|
||||
--red-400: @red-400;
|
||||
--red-500: @red-500;
|
||||
--red-600: @red-600;
|
||||
--red-700: @red-700;
|
||||
--red-800: @red-800;
|
||||
--red-900: @red-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Hemerocallis / 萱草 / Orange
|
||||
* =====================================
|
||||
*/
|
||||
@orange-50: #fef0e6;
|
||||
@orange-100: #fee1cd;
|
||||
@orange-200: #fdc49b;
|
||||
@orange-300: #fca669;
|
||||
@orange-400: #ff8c51;
|
||||
@orange-500: #fb8937;
|
||||
@orange-600: #f96800;
|
||||
@orange-700: #df5d00;
|
||||
@orange-800: #cc4f10;
|
||||
@orange-900: #b24000;
|
||||
|
||||
:export {
|
||||
--orange-50: @orange-50;
|
||||
--orange-100: @orange-100;
|
||||
--orange-200: @orange-200;
|
||||
--orange-300: @orange-300;
|
||||
--orange-400: @orange-400;
|
||||
--orange-500: @orange-500;
|
||||
--orange-600: @orange-600;
|
||||
--orange-700: @orange-700;
|
||||
--orange-800: @orange-800;
|
||||
--orange-900: @orange-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Marigold / 万寿菊 / Gold
|
||||
* =====================================
|
||||
*/
|
||||
@gold-50: #fef6e6;
|
||||
@gold-100: #feeecd;
|
||||
@gold-200: #fddc9b;
|
||||
@gold-300: #fccb69;
|
||||
@gold-400: #ffbd37;
|
||||
@gold-500: #faad14;
|
||||
@gold-600: #e59b07;
|
||||
@gold-700: #c68400;
|
||||
@gold-800: #a97100;
|
||||
@gold-900: #8f5f00;
|
||||
|
||||
:export {
|
||||
--gold-50: @gold-50;
|
||||
--gold-100: @gold-100;
|
||||
--gold-200: @gold-200;
|
||||
--gold-300: @gold-300;
|
||||
--gold-400: @gold-400;
|
||||
--gold-500: @gold-500;
|
||||
--gold-600: @gold-600;
|
||||
--gold-700: @gold-700;
|
||||
--gold-800: @gold-800;
|
||||
--gold-900: @gold-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Forsythia Suspensa / 连翘 / Yellow
|
||||
* =====================================
|
||||
*/
|
||||
@yellow-50: #fefbe6;
|
||||
@yellow-100: #fef7cd;
|
||||
@yellow-200: #fdf09b;
|
||||
@yellow-300: #fce869;
|
||||
@yellow-400: #fbe137;
|
||||
@yellow-500: #f9d700;
|
||||
@yellow-600: #ebc301;
|
||||
@yellow-700: #d8b300;
|
||||
@yellow-800: #c5a300;
|
||||
@yellow-900: #b19401;
|
||||
|
||||
:export {
|
||||
--yellow-50: @yellow-50;
|
||||
--yellow-100: @yellow-100;
|
||||
--yellow-200: @yellow-200;
|
||||
--yellow-300: @yellow-300;
|
||||
--yellow-400: @yellow-400;
|
||||
--yellow-500: @yellow-500;
|
||||
--yellow-600: @yellow-600;
|
||||
--yellow-700: @yellow-700;
|
||||
--yellow-800: @yellow-800;
|
||||
--yellow-900: @yellow-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Eustoma Grandiflorum / 洋桔梗 / Verdancy
|
||||
* =====================================
|
||||
*/
|
||||
@verdancy-50: #f7fde8;
|
||||
@verdancy-100: #effbd0;
|
||||
@verdancy-200: #def6a2;
|
||||
@verdancy-300: #cef273;
|
||||
@verdancy-400: #beee44;
|
||||
@verdancy-500: #a4dc16;
|
||||
@verdancy-600: #8bbb11;
|
||||
@verdancy-700: #7aa017;
|
||||
@verdancy-800: #688c0d;
|
||||
@verdancy-900: #58770a;
|
||||
|
||||
:export {
|
||||
--verdancy-50: @verdancy-50;
|
||||
--verdancy-100: @verdancy-100;
|
||||
--verdancy-200: @verdancy-200;
|
||||
--verdancy-300: @verdancy-300;
|
||||
--verdancy-400: @verdancy-400;
|
||||
--verdancy-500: @verdancy-500;
|
||||
--verdancy-600: @verdancy-600;
|
||||
--verdancy-700: @verdancy-700;
|
||||
--verdancy-800: @verdancy-800;
|
||||
--verdancy-900: @verdancy-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Asparagus Fern / 文竹 / Green
|
||||
* =====================================
|
||||
*/
|
||||
@green-50: #effce8;
|
||||
@green-100: #dff9d2;
|
||||
@green-200: #bff3a5;
|
||||
@green-300: #9fed78;
|
||||
@green-400: #7fe74b;
|
||||
@green-500: #59d01e;
|
||||
@green-600: #49b811;
|
||||
@green-700: #409f11;
|
||||
@green-800: #398712;
|
||||
@green-900: #317310;
|
||||
|
||||
:export {
|
||||
--green-50: @green-50;
|
||||
--green-100: @green-100;
|
||||
--green-200: @green-200;
|
||||
--green-300: @green-300;
|
||||
--green-400: @green-400;
|
||||
--green-500: @green-500;
|
||||
--green-600: @green-600;
|
||||
--green-700: @green-700;
|
||||
--green-800: @green-800;
|
||||
--green-900: @green-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* 霁 / Jiqing
|
||||
* =====================================
|
||||
*/
|
||||
@jiqing-50: #e5fffb;
|
||||
@jiqing-100: #ccfff7;
|
||||
@jiqing-200: #a9fff2;
|
||||
@jiqing-300: #78fce8;
|
||||
@jiqing-400: #2afede;
|
||||
@jiqing-500: #10e8c7;
|
||||
@jiqing-600: #00d2b2;
|
||||
@jiqing-700: #00b298;
|
||||
@jiqing-800: #009e87;
|
||||
@jiqing-900: #008b76;
|
||||
|
||||
:export {
|
||||
--jiqing-50: @jiqing-50;
|
||||
--jiqing-100: @jiqing-100;
|
||||
--jiqing-200: @jiqing-200;
|
||||
--jiqing-300: @jiqing-300;
|
||||
--jiqing-400: @jiqing-400;
|
||||
--jiqing-500: @jiqing-500;
|
||||
--jiqing-600: @jiqing-600;
|
||||
--jiqing-700: @jiqing-700;
|
||||
--jiqing-800: @jiqing-800;
|
||||
--jiqing-900: @jiqing-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Cornflower / 矢车菊 / Blue
|
||||
* =====================================
|
||||
*/
|
||||
@blue-50: #e4f4fe;
|
||||
@blue-100: #d0edff;
|
||||
@blue-200: #9fdaff;
|
||||
@blue-300: #62c2ff;
|
||||
@blue-400: #2daeff;
|
||||
@blue-500: #0b9efb;
|
||||
@blue-600: #0493ee;
|
||||
@blue-700: #0080d2;
|
||||
@blue-800: #006cae;
|
||||
@blue-900: #005f9a;
|
||||
|
||||
:export {
|
||||
--blue-50: @blue-50;
|
||||
--blue-100: @blue-100;
|
||||
--blue-200: @blue-200;
|
||||
--blue-300: @blue-300;
|
||||
--blue-400: @blue-400;
|
||||
--blue-500: @blue-500;
|
||||
--blue-600: @blue-600;
|
||||
--blue-700: @blue-700;
|
||||
--blue-800: @blue-800;
|
||||
--blue-900: @blue-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Hyacinth / 风信子 / Hyacinth Blue
|
||||
* =====================================
|
||||
*/
|
||||
@hyacinth-50: #e8ecfd;
|
||||
@hyacinth-100: #d0d9fb;
|
||||
@hyacinth-200: #a2b3f6;
|
||||
@hyacinth-300: #738df2;
|
||||
@hyacinth-400: #3a60f7;
|
||||
@hyacinth-500: #274fee;
|
||||
@hyacinth-600: #143ee3;
|
||||
@hyacinth-700: #012bd2;
|
||||
@hyacinth-800: #0025b7;
|
||||
@hyacinth-900: #001f9c;
|
||||
|
||||
:export {
|
||||
--hyacinth-50: @hyacinth-50;
|
||||
--hyacinth-100: @hyacinth-100;
|
||||
--hyacinth-200: @hyacinth-200;
|
||||
--hyacinth-300: @hyacinth-300;
|
||||
--hyacinth-400: @hyacinth-400;
|
||||
--hyacinth-500: @hyacinth-500;
|
||||
--hyacinth-600: @hyacinth-600;
|
||||
--hyacinth-700: @hyacinth-700;
|
||||
--hyacinth-800: @hyacinth-800;
|
||||
--hyacinth-900: @hyacinth-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Violet / 紫罗兰 / Purple
|
||||
* =====================================
|
||||
*/
|
||||
@purple-50: #f1eafa;
|
||||
@purple-100: #e3d5f6;
|
||||
@purple-200: #c7abed;
|
||||
@purple-300: #aa82e3;
|
||||
@purple-400: #9e6de3;
|
||||
@purple-500: #894ede;
|
||||
@purple-600: #7735d4;
|
||||
@purple-700: #6721cb;
|
||||
@purple-800: #510eb0;
|
||||
@purple-900: #3f0198;
|
||||
|
||||
:export {
|
||||
--purple-50: @purple-50;
|
||||
--purple-100: @purple-100;
|
||||
--purple-200: @purple-200;
|
||||
--purple-300: @purple-300;
|
||||
--purple-400: @purple-400;
|
||||
--purple-500: @purple-500;
|
||||
--purple-600: @purple-600;
|
||||
--purple-700: @purple-700;
|
||||
--purple-800: @purple-800;
|
||||
--purple-900: @purple-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* Sorrel pulp / 酢浆 / Magenta
|
||||
* =====================================
|
||||
*/
|
||||
@magenta-50: #fde8f3;
|
||||
@magenta-100: #fbd0e8;
|
||||
@magenta-200: #f6a2d0;
|
||||
@magenta-300: #f273b9;
|
||||
@magenta-400: #f248a6;
|
||||
@magenta-500: #e7258f;
|
||||
@magenta-600: #d4157e;
|
||||
@magenta-700: #c1026b;
|
||||
@magenta-800: #a1095c;
|
||||
@magenta-900: #8f0550;
|
||||
|
||||
:export {
|
||||
--magenta-50: @magenta-50;
|
||||
--magenta-100: @magenta-100;
|
||||
--magenta-200: @magenta-200;
|
||||
--magenta-300: @magenta-300;
|
||||
--magenta-400: @magenta-400;
|
||||
--magenta-500: @magenta-500;
|
||||
--magenta-600: @magenta-600;
|
||||
--magenta-700: @magenta-700;
|
||||
--magenta-800: @magenta-800;
|
||||
--magenta-900: @magenta-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* =====================================
|
||||
* 灰 / Grey
|
||||
* =====================================
|
||||
*/
|
||||
@grey-50: #f5f5f5;
|
||||
@grey-100: #eeeff1;
|
||||
@grey-200: #e5e5e5;
|
||||
@grey-300: #d8d8d8;
|
||||
@grey-400: #bcbcbc;
|
||||
@grey-500: #999999;
|
||||
@grey-600: #7a7a7a;
|
||||
@grey-700: #656565;
|
||||
@grey-800: #565656;
|
||||
@grey-900: #4b4b4b;
|
||||
|
||||
:export {
|
||||
--grey-50: @grey-50;
|
||||
--grey-100: @grey-100;
|
||||
--grey-200: @grey-200;
|
||||
--grey-300: @grey-300;
|
||||
--grey-400: @grey-400;
|
||||
--grey-500: @grey-500;
|
||||
--grey-600: @grey-600;
|
||||
--grey-700: @grey-700;
|
||||
--grey-800: @grey-800;
|
||||
--grey-900: @grey-900;
|
||||
}
|
||||
|
||||
// 黑 / 白 / Black / White
|
||||
@color-black: #1e222b;
|
||||
@color-white: #ffffff;
|
||||
|
||||
:export {
|
||||
// 黑 / 白 / Black / White
|
||||
--color-black: @color-black;
|
||||
--color-white: @color-white;
|
||||
}
|
||||
|
||||
// Box Shadow
|
||||
@box-shadow-base: 0 4px 12px rgba(@color-black, 0.08);
|
||||
@box-shadow-lg: 0 4px 24px 0 rgba(@color-black, 0.08);
|
||||
|
||||
// Background
|
||||
@bg-color: @grey-100;
|
||||
@bg-color-hover: @grey-300;
|
||||
@bg-color-hover-light: @grey-100;
|
||||
@bg-color-secondary: @color-white;
|
||||
@bg-color-overlay: @color-white;
|
||||
|
||||
// Text Color
|
||||
@text-color: @color-black;
|
||||
@text-color-secondary: @grey-600;
|
||||
@text-color-secondary-darker: @grey-900;
|
||||
@text-color-tertiary: @grey-400;
|
||||
|
||||
// Border Color
|
||||
@border-color: @grey-200;
|
||||
|
||||
// Scrollbar Color
|
||||
@scrollbar-color: @grey-400;
|
||||
@scrollbar-color-hover: @grey-500;
|
||||
@scrollbar-color-active: @grey-600;
|
||||
|
||||
// Border Radius
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-lg: 8px;
|
||||
@border-radius-xl: 12px;
|
||||
|
||||
// Margin
|
||||
@margin-xxl: 28px;
|
||||
@margin-xl: 24px;
|
||||
@margin-lg: 20px;
|
||||
@margin-base: 16px;
|
||||
@margin-sm: 12px;
|
||||
@margin-xs: 8px;
|
||||
@margin-xxs: 4px;
|
||||
|
||||
// Padding
|
||||
@padding-xl: 20px;
|
||||
@padding-lg: 16px;
|
||||
@padding-base: 12px;
|
||||
@padding-sm: 8px;
|
||||
@padding-xs: 4px;
|
||||
|
||||
// Font Size
|
||||
@font-size-xxl: 20px;
|
||||
@font-size-xl: 18px;
|
||||
@font-size-lg: 16px;
|
||||
@font-size-base: 15px;
|
||||
@font-size-sm: 14px;
|
||||
@font-size-xs: 13px;
|
||||
@font-size-xxs: 12px;
|
||||
|
||||
:export {
|
||||
// Box Shadow
|
||||
--box-shadow-base: @box-shadow-base;
|
||||
--box-shadow-lg: @box-shadow-lg;
|
||||
|
||||
// Background
|
||||
--bg-color: @bg-color;
|
||||
--bg-color-hover: @bg-color-hover;
|
||||
--bg-color-hover-light: @bg-color-hover-light;
|
||||
--bg-color-secondary: @bg-color-secondary;
|
||||
--bg-color-overlay: @bg-color-overlay;
|
||||
|
||||
// Text Color
|
||||
--text-color: @text-color;
|
||||
--text-color-secondary: @text-color-secondary;
|
||||
--text-color-secondary-darker: @text-color-secondary-darker;
|
||||
--text-color-tertiary: @text-color-tertiary;
|
||||
|
||||
// Border Color
|
||||
--border-color: @border-color;
|
||||
|
||||
// Scrollbar Color
|
||||
--scrollbar-color: @scrollbar-color;
|
||||
--scrollbar-color-hover: @scrollbar-color-hover;
|
||||
--scrollbar-color-active: @scrollbar-color-active;
|
||||
|
||||
// Border Radius
|
||||
--border-radius-base: @border-radius-base;
|
||||
--border-radius-lg: @border-radius-lg;
|
||||
--border-radius-xl: @border-radius-xl;
|
||||
|
||||
// Margin
|
||||
--margin-xl: @margin-xl;
|
||||
--margin-lg: @margin-lg;
|
||||
--margin-base: @margin-base;
|
||||
--margin-sm: @margin-sm;
|
||||
--margin-xs: @margin-xs;
|
||||
--margin-xxs: @margin-xxs;
|
||||
|
||||
// Padding
|
||||
--padding-xl: @padding-xl;
|
||||
--padding-lg: @padding-lg;
|
||||
--padding-base: @padding-base;
|
||||
--padding-sm: @padding-sm;
|
||||
--padding-xs: @padding-xs;
|
||||
|
||||
// Font Size
|
||||
--font-size-xxl: @font-size-xxl;
|
||||
--font-size-xl: @font-size-xl;
|
||||
--font-size-lg: @font-size-lg;
|
||||
--font-size-base: @font-size-base;
|
||||
--font-size-sm: @font-size-sm;
|
||||
--font-size-xs: @font-size-xs;
|
||||
--font-size-xxs: @font-size-xxs;
|
||||
}
|
||||
|
||||
// Breakpoint
|
||||
@breakpoint-xs: 768px;
|
||||
@breakpoint-sm: 1024px;
|
||||
@breakpoint-base: 1280px;
|
||||
@breakpoint-lg: 1536px;
|
||||
|
||||
:export {
|
||||
--breakpoint-xs: @breakpoint-xs;
|
||||
--breakpoint-sm: @breakpoint-sm;
|
||||
--breakpoint-base: @breakpoint-base;
|
||||
--breakpoint-lg: @breakpoint-lg;
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
@import './base.less';
|
||||
|
||||
/**
|
||||
* new design system
|
||||
*/
|
||||
// Functional / 功能
|
||||
@info-color: @blue-400;
|
||||
@success-color: @green-500;
|
||||
@warning-color: @gold-400;
|
||||
@error-color: @red-400;
|
||||
|
||||
// Brand / 品牌
|
||||
@primary-color: @hyacinth-500;
|
||||
@primary-color-hover: @hyacinth-400;
|
||||
|
||||
// Link
|
||||
@link-color: @blue-500;
|
||||
|
||||
:export {
|
||||
// Functional / 功能
|
||||
--info-color: @info-color;
|
||||
--success-color: @success-color;
|
||||
--warning-color: @warning-color;
|
||||
--error-color: @error-color;
|
||||
|
||||
// Brand / 品牌
|
||||
--primary-color: @primary-color;
|
||||
--primary-color-hover: @primary-color-hover;
|
||||
|
||||
// Link
|
||||
--link-color: @link-color;
|
||||
}
|
||||
|
||||
// Loop Color / 循环色
|
||||
@loop-color-1: @purple-400;
|
||||
@loop-color-2: @green-600;
|
||||
@loop-color-3: @blue-500;
|
||||
@loop-color-4: @gold-400;
|
||||
@loop-color-5: @magenta-300;
|
||||
@loop-color-6: @jiqing-600;
|
||||
@loop-color-7: @orange-400;
|
||||
@loop-color-8: @grey-800;
|
||||
@loop-color-9: @hyacinth-500;
|
||||
@loop-color-10: @red-300;
|
||||
@loop-color-11: @verdancy-600;
|
||||
@loop-color-12: @yellow-700;
|
||||
|
||||
:export {
|
||||
--loop-color-1: @loop-color-1;
|
||||
--loop-color-2: @loop-color-2;
|
||||
--loop-color-3: @loop-color-3;
|
||||
--loop-color-4: @loop-color-4;
|
||||
--loop-color-5: @loop-color-5;
|
||||
--loop-color-6: @loop-color-6;
|
||||
--loop-color-7: @loop-color-7;
|
||||
--loop-color-8: @loop-color-8;
|
||||
--loop-color-9: @loop-color-9;
|
||||
--loop-color-10: @loop-color-10;
|
||||
--loop-color-11: @loop-color-11;
|
||||
--loop-color-12: @loop-color-12;
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
@import './base.less';
|
||||
|
||||
/**
|
||||
* new design system
|
||||
*/
|
||||
// Functional
|
||||
@info-color: @blue-400;
|
||||
@success-color: @green-500;
|
||||
@warning-color: @gold-400;
|
||||
@error-color: @red-400;
|
||||
|
||||
// Brand / 品牌
|
||||
@primary-color: @green-700;
|
||||
@primary-color-hover: @green-600;
|
||||
|
||||
// Link
|
||||
@link-color: @blue-500;
|
||||
|
||||
:export {
|
||||
// Functional / 功能
|
||||
--info-color: @info-color;
|
||||
--success-color: @success-color;
|
||||
--warning-color: @warning-color;
|
||||
--error-color: @error-color;
|
||||
|
||||
// Brand / 品牌
|
||||
--primary-color: @primary-color;
|
||||
--primary-color-hover: @primary-color-hover;
|
||||
|
||||
// Link
|
||||
--link-color: @link-color;
|
||||
}
|
||||
|
||||
// Loop Color / 循环色
|
||||
@loop-color-1: @purple-400;
|
||||
@loop-color-2: @green-600;
|
||||
@loop-color-3: @blue-500;
|
||||
@loop-color-4: @gold-400;
|
||||
@loop-color-5: @magenta-300;
|
||||
@loop-color-6: @jiqing-600;
|
||||
@loop-color-7: @orange-400;
|
||||
@loop-color-8: @grey-800;
|
||||
@loop-color-9: @hyacinth-500;
|
||||
@loop-color-10: @red-300;
|
||||
@loop-color-11: @verdancy-600;
|
||||
@loop-color-12: @yellow-700;
|
||||
|
||||
:export {
|
||||
--loop-color-1: @loop-color-1;
|
||||
--loop-color-2: @loop-color-2;
|
||||
--loop-color-3: @loop-color-3;
|
||||
--loop-color-4: @loop-color-4;
|
||||
--loop-color-5: @loop-color-5;
|
||||
--loop-color-6: @loop-color-6;
|
||||
--loop-color-7: @loop-color-7;
|
||||
--loop-color-8: @loop-color-8;
|
||||
--loop-color-9: @loop-color-9;
|
||||
--loop-color-10: @loop-color-10;
|
||||
--loop-color-11: @loop-color-11;
|
||||
--loop-color-12: @loop-color-12;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
.theme {
|
||||
color: rgb(var(--text-color));
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'PingFang SC',
|
||||
'Hiragino Sans GB',
|
||||
'noto sans',
|
||||
'Microsoft YaHei',
|
||||
'Helvetica Neue',
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.render-canvas {
|
||||
&::selection {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -1,95 +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.
|
||||
*/
|
||||
|
||||
import { isBrowser } from '../helper/is-browser';
|
||||
import styles from './theme-root.module.less';
|
||||
|
||||
function convertToDashCase(input: string): string {
|
||||
const dashCase = input.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`).replace(/(\d+)/g, '-$1');
|
||||
|
||||
return `--${dashCase}`;
|
||||
}
|
||||
|
||||
function convertHexToRgb(input: string): string {
|
||||
if (input.startsWith('#')) {
|
||||
const hex = input.replace('#', '');
|
||||
const r = Number.parseInt(hex.substring(0, 2), 16);
|
||||
const g = Number.parseInt(hex.substring(2, 4), 16);
|
||||
const b = Number.parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
return `${r}, ${g}, ${b}`;
|
||||
}
|
||||
|
||||
return input;
|
||||
}
|
||||
|
||||
class Theme {
|
||||
private static _instance: Theme | null = null;
|
||||
private _styleSheet: HTMLStyleElement | null = null;
|
||||
private _themeRootName = styles.theme;
|
||||
|
||||
private constructor() {
|
||||
if (!isBrowser()) return;
|
||||
|
||||
const $style = document.createElement('style');
|
||||
$style.id = this._themeRootName;
|
||||
|
||||
// Determine the mount point for the stylesheet
|
||||
let mountPoint: HTMLElement | ShadowRoot | null = null;
|
||||
const currentRoot = document.getRootNode();
|
||||
|
||||
if (currentRoot === document) {
|
||||
// Normal DOM environment
|
||||
mountPoint = document.head;
|
||||
} else if (currentRoot instanceof ShadowRoot) {
|
||||
// Shadow DOM environment
|
||||
mountPoint = currentRoot;
|
||||
} else {
|
||||
// Inside an iframe or other environment
|
||||
mountPoint = (currentRoot as Document).head;
|
||||
}
|
||||
|
||||
if (mountPoint) {
|
||||
mountPoint.appendChild($style);
|
||||
this._styleSheet = $style;
|
||||
}
|
||||
}
|
||||
|
||||
static getInstance(): Theme {
|
||||
if (!Theme._instance) {
|
||||
Theme._instance = new Theme();
|
||||
}
|
||||
return Theme._instance;
|
||||
}
|
||||
|
||||
setTheme(root: HTMLElement, theme: Record<string, string>) {
|
||||
if (!this._styleSheet) return;
|
||||
|
||||
// 1. set theme root class
|
||||
root.classList.remove(this._themeRootName);
|
||||
root.classList.add(this._themeRootName);
|
||||
|
||||
// 2. remove old theme
|
||||
this._styleSheet.innerHTML = '';
|
||||
|
||||
// 3. set new theme
|
||||
this._styleSheet.innerHTML = `.${this._themeRootName} {${Object.keys(theme)
|
||||
.map((key) => `${convertToDashCase(key)}: ${convertHexToRgb(theme[key])};`)
|
||||
.join('')}}`;
|
||||
}
|
||||
}
|
||||
|
||||
export const themeInstance = Theme.getInstance();
|
||||
@@ -79,13 +79,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
import type { Meta } from '@storybook/react';
|
||||
|
||||
import type { Dependency } from '@univerjs/core';
|
||||
import { LocaleService, LocaleType, ThemeService } from '@univerjs/core';
|
||||
import { ColorPicker, defaultTheme } from '@univerjs/design';
|
||||
import { LocaleService, LocaleType } from '@univerjs/core';
|
||||
import { ColorPicker } from '@univerjs/design';
|
||||
import { DocSelectionManagerService } from '@univerjs/docs';
|
||||
import { IRenderManagerService, RenderManagerService } from '@univerjs/engine-render';
|
||||
import { ComponentManager, DesktopLayoutService, FontFamily, FontFamilyItem, FontSize, ILayoutService, IMenuManagerService, MenuManagerService, RediContext } from '@univerjs/ui';
|
||||
@@ -82,8 +82,6 @@ export const Playground = {
|
||||
|
||||
useEffect(() => {
|
||||
if (!inject) return;
|
||||
const themeService = inject.get(ThemeService);
|
||||
themeService.setTheme(defaultTheme);
|
||||
|
||||
const componentManager = inject.get(ComponentManager);
|
||||
componentManager.register(COLOR_PICKER_COMPONENT, ColorPicker);
|
||||
|
||||
@@ -79,8 +79,7 @@ export function FloatToolbar(props: IFloatToolbarProps) {
|
||||
<div
|
||||
className={`
|
||||
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)]
|
||||
univer-bg-white univer-py-1.5 univer-shadow-sm
|
||||
`}
|
||||
>
|
||||
{menus.map((groupItem) => groupItem.item && (
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
DEFAULT_STYLES,
|
||||
DOCS_ZEN_EDITOR_UNIT_ID_KEY,
|
||||
DocumentFlavor,
|
||||
get,
|
||||
HorizontalAlign,
|
||||
ICommandService,
|
||||
IUniverInstanceService,
|
||||
@@ -636,7 +637,9 @@ export function TextColorSelectorMenuItemFactory(accessor: IAccessor): IMenuSele
|
||||
},
|
||||
],
|
||||
value$: new Observable<string>((subscriber) => {
|
||||
const defaultColor = themeService.getCurrentTheme().textColor;
|
||||
const theme = themeService.getCurrentTheme();
|
||||
const defaultColor = get(theme, 'gray.900');
|
||||
|
||||
const disposable = commandService.onCommandExecuted((c) => {
|
||||
if (c.id === SetInlineFormatTextColorCommand.id) {
|
||||
const color = (c.params as { value: string }).value;
|
||||
@@ -999,7 +1002,9 @@ export function BackgroundColorSelectorMenuItemFactory(accessor: IAccessor): IMe
|
||||
},
|
||||
],
|
||||
value$: new Observable<string>((subscriber) => {
|
||||
const defaultColor = themeService.getCurrentTheme().primaryColor;
|
||||
const theme = themeService.getCurrentTheme();
|
||||
const defaultColor = get(theme, 'primary.600');
|
||||
|
||||
const disposable = commandService.onCommandExecuted((c) => {
|
||||
if (c.id === SetInlineFormatTextBackgroundColorCommand.id) {
|
||||
const color = (c.params as { value: string }).value;
|
||||
|
||||
@@ -100,7 +100,7 @@ export function PageSettings(props: IConfirmChildrenProps) {
|
||||
return (
|
||||
<div className="univer-flex univer-flex-col univer-gap-4">
|
||||
<div className="univer-flex univer-flex-col univer-gap-2">
|
||||
<label className="univer-text-sm univer-font-medium univer-text-[#0E111E]">
|
||||
<label className="univer-text-sm univer-font-medium univer-text-gray-900">
|
||||
{localeService.t('page-settings.paper-size')}
|
||||
</label>
|
||||
<Select
|
||||
@@ -114,7 +114,7 @@ export function PageSettings(props: IConfirmChildrenProps) {
|
||||
</div>
|
||||
|
||||
{/* <div className="univer-flex univer-flex-col univer-gap-2">
|
||||
<label className="univer-text-sm univer-font-medium univer-text-[#0E111E]">
|
||||
<label className="univer-text-sm univer-font-medium univer-text-gray-900">
|
||||
{localeService.t('page-settings.orientation')}
|
||||
</label>
|
||||
<div className="univer-flex univer-gap-3">
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,13 +75,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
"devDependencies": {
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,8 +73,8 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
},
|
||||
"browser": {
|
||||
"fs": false
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
"@univerjs-infra/shared": "workspace:*",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
"rxjs": "^7.8.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
"@univerjs/icons-svg": "^0.3.24",
|
||||
"rxjs": "^7.8.1",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4",
|
||||
"vitest": "^3.1.2"
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user