opensource/univer
3
0
Fork 0
mirror of https://github.com/dream-num/univer.git synced 2026-09-24 15:32:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update styling and class names across various components to improve maintainability (#5167)

Browse Source
This commit is contained in:
白熱
2025-05-09 21:39:02 +08:00
committed by GitHub
parent 3df141f728
commit 6a38e35af3
105 changed files with 579 additions and 632 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages-experimental/uni-formula-ui/package.json
+1
View File
@@ -67,6 +67,7 @@
},
"dependencies": {
"@univerjs/core": "workspace:*",
"@univerjs/design": "workspace:*",
"@univerjs/docs": "workspace:*",
"@univerjs/docs-ui": "workspace:*",
"@univerjs/engine-render": "workspace:*",
packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx
+6 -5
View File
@@ -28,10 +28,11 @@ import {
VerticalAlign,
WrapStrategy,
} from '@univerjs/core';
import { borderClassName, clsx } from '@univerjs/design';
import { CheckMarkSingle, CloseSingle } from '@univerjs/icons';
import { useDependency, useObservable } from '@univerjs/ui';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { CloseFormulaPopupOperation, ConfirmFormulaPopupCommand } from '../../commands/operations/operation';
import { DOC_FORMULA_POPUP_KEY, UniFormulaPopupService } from '../../services/formula-popup.service';
@@ -131,12 +132,12 @@ function DocFormula(props: { popupInfo: IUniFormulaPopupInfo }) {
return (
<div
className={`
className={clsx(`
univer-box-border univer-flex univer-h-12 univer-w-[482px] univer-items-center univer-gap-x-2
univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-2 univer-shadow-lg
univer-overflow-hidden univer-rounded-lg u univer-border-gray-200 univer-bg-white univer-p-2
univer-shadow-lg
dark:univer-bg-gray-900
`}
`, borderClassName)}
onMouseEnter={() => onHovered(true)}
onMouseLeave={() => onHovered(false)}
>
packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx
+4 -5
View File
@@ -16,7 +16,7 @@
import type { SlideDataModel } from '@univerjs/core';
import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { clsx, scrollbarClassName } from '@univerjs/design';
import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { IRenderManagerService } from '@univerjs/engine-render';
import { IncreaseSingle } from '@univerjs/icons';
import { ActivateSlidePageOperation, AppendSlideOperation, SetSlidePageThumbOperation } from '@univerjs/slides-ui';
@@ -107,10 +107,9 @@ export function UniSlideSideBar() {
key={item.id}
className={clsx(`
univer-relative univer-my-4 univer-box-border univer-flex univer-w-[160px]
univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid
univer-border-gray-200
hover:univer-border-primary-500
`, item.id === activatePageId && 'univer-border-primary-500')}
univer-overflow-hidden univer-rounded-lg
hover:univer-border-primary-600
`, borderClassName, item.id === activatePageId && 'univer-border-primary-600')}
onClick={() => activatePage(item.id)}
>
<span
packages-experimental/uniui/src/views/uni-controls/UniControls.tsx
+8 -12
View File
@@ -15,7 +15,7 @@
*/
import type { IProjectNode } from '../../services/unit-grid/unit-grid.service';
import { Button, clsx, Dropdown, Tooltip } from '@univerjs/design';
import { borderClassName, Button, clsx, Dropdown, Tooltip } from '@univerjs/design';
import { CheckMarkSingle, FullscreenSingle, IncreaseSingle, ZoomReduceSingle } from '@univerjs/icons';
import { ISidebarService, useDependency } from '@univerjs/ui';
import { useReactFlow } from '@xyflow/react';
@@ -124,11 +124,10 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?:
return (
<div
className={`
className={clsx(`
univer-fixed univer-bottom-3 univer-right-3 univer-flex univer-w-fit univer-items-center univer-gap-3
univer-rounded-[10px] univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-2
univer-shadow
`}
univer-rounded-[10px] univer-bg-white univer-p-2 univer-shadow
`, borderClassName)}
style={{ right: `${rightPadding}px` }}
>
<UniControlButton tooltips="Full screen" onClick={onFullscreenHandler}>
@@ -140,13 +139,10 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?:
<Dropdown
overlay={(
<div
className={clsx(
`
univer-box-border univer-grid univer-w-32 univer-items-center univer-gap-1
univer-rounded-lg univer-border univer-border-gray-300 univer-bg-white univer-p-4
univer-text-xs univer-shadow-lg
`
)}
className={`
univer-box-border univer-grid univer-w-32 univer-items-center univer-gap-1 univer-p-4
univer-text-xs
`}
>
{shortcuts?.map((item) => (
<a
packages-experimental/uniui/src/views/uni-sidebar/UniSidebar.tsx
+4 -5
View File
@@ -15,7 +15,7 @@
*/
import type { ISidebarMethodOptions } from '@univerjs/ui';
import { clsx, scrollbarClassName } from '@univerjs/design';
import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { CloseSingle } from '@univerjs/icons';
import { CustomLabel, ILeftSidebarService, ISidebarService, useDependency, useObservable } from '@univerjs/ui';
import React, { useEffect, useMemo, useRef } from 'react';
@@ -106,9 +106,8 @@ export function UniSidebar(props: IUniSidebarProps) {
<aside
className={clsx(`
univer-pointer-events-auto univer-fixed univer-bottom-3 univer-top-12 univer-z-20 univer-box-border
univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-shadow-lg univer-transition-all
`, {
univer-overflow-hidden univer-rounded-lg univer-shadow-lg univer-transition-all
`, borderClassName, {
'univer-left-3 univer-w-[180px]': position === 'left',
'univer-right-3 univer-min-w-[280px] univer-max-w-[400px]': position === 'right',
'univer-translate-x-[calc(-100%-12px)]': position === 'left' && !visible,
@@ -117,11 +116,11 @@ export function UniSidebar(props: IUniSidebarProps) {
style={{ width }}
>
<section
ref={scrollRef}
className={clsx(`
univer-m-auto univer-box-border univer-flex univer-h-0 univer-min-h-full univer-w-full univer-flex-col
univer-overflow-hidden univer-overflow-y-auto univer-bg-white
`, scrollbarClassName)}
ref={scrollRef}
>
{ showClose && (
<header
packages-experimental/uniui/src/views/workbench/UniWorkbench.tsx
+4 -5
View File
@@ -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 } from '@univerjs/design';
import { borderClassName, clsx, ConfigContext, ConfigProvider } from '@univerjs/design';
import { IRenderManagerService } from '@univerjs/engine-render';
import { MenuSingle } from '@univerjs/icons';
import {
@@ -353,10 +353,9 @@ function UnitRenderer(props: IUnitRendererProps) {
return (
<div
className={clsx(`
univer-relative univer-flex-1 univer-overflow-hidden univer-rounded-lg univer-borer univer-border-solid
univer-border-transparent
`, {
'univer-border-primary-500': focused,
univer-relative univer-flex-1 univer-overflow-hidden univer-rounded-lg univer-border-transparent
`, borderClassName, {
'univer-border-primary-600': focused,
})}
ref={mountRef}
// We bind these focusing events on capture phrase so the
packages/design/src/components/cascader-list/CascaderList.tsx
+3 -3
View File
@@ -16,8 +16,8 @@
import { CheckMarkSingle } from '@univerjs/icons';
import { useContext, useMemo } from 'react';
import { borderClassName, scrollbarClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
import { scrollbarClassName } from '../../helper/scrollbar-cls';
import { ConfigContext } from '../config-provider/ConfigProvider';
export interface ICascaderOption {
@@ -104,10 +104,10 @@ export function CascaderList(props: ICascaderListProps) {
<section
className={clsx(`
univer-grid univer-h-full univer-max-h-80 univer-grid-flow-col univer-overflow-auto-y univer-rounded
univer-border univer-border-solid univer-border-gray-200 univer-py-2 univer-text-gray-900
univer-py-2 univer-text-gray-900
[&>ul:not(:last-child)]:univer-border-0 [&>ul:not(:last-child)]:univer-border-r
[&>ul:not(:last-child)]:univer-border-solid [&>ul:not(:last-child)]:univer-border-r-gray-200
`, scrollbarClassName, wrapperClassName)}
`, borderClassName, scrollbarClassName, wrapperClassName)}
>
{activeOptions.map((options, index) =>
options.length
packages/design/src/components/dialog/DialogPrimitive.tsx
+4 -3
View File
@@ -18,6 +18,7 @@ import type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from 'react
import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } from '@radix-ui/react-dialog';
import { CloseSingle } from '@univerjs/icons';
import { forwardRef } from 'react';
import { borderClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
const Dialog = Root;
@@ -63,9 +64,8 @@ const DialogContent = forwardRef<
`
univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1050] univer-box-border univer-grid
univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4
univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-px-6 univer-py-4
univer-text-gray-500 univer-shadow-md univer-duration-200
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-gray-400
univer-bg-white univer-px-6 univer-py-4 univer-text-gray-500 univer-shadow-md univer-duration-200
dark:univer-bg-gray-700 dark:univer-text-gray-400
data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0
data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2
data-[state=closed]:univer-slide-out-to-top-[48%]
@@ -74,6 +74,7 @@ const DialogContent = forwardRef<
data-[state=open]:univer-slide-in-from-top-[48%]
sm:univer-rounded-lg
`,
borderClassName,
className
)}
{...props}
packages/design/src/components/dropdown-menu/DropdownMenu.tsx
+1 -1
View File
@@ -172,7 +172,7 @@ export function DropdownMenu(props: IDropdownMenuProps) {
<DropdownMenuTrigger asChild>
{children}
</DropdownMenuTrigger>
<DropdownMenuContent {...restProps} onWheel={(e) => e.stopPropagation()}>
<DropdownMenuContent className="univer-text-sm" {...restProps} onWheel={(e) => e.stopPropagation()}>
{items.map((item, index) => renderMenuItem(item, index))}
</DropdownMenuContent>
</DropdownMenuPrimitive>
packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx
+9 -7
View File
@@ -33,8 +33,8 @@ import {
Trigger,
} from '@radix-ui/react-dropdown-menu';
import { CheckMarkSingle, MoreRightSingle } from '@univerjs/icons';
import { borderClassName, scrollbarClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
import { scrollbarClassName } from '../../helper/scrollbar-cls';
function DropdownMenuPrimitive({
...props
@@ -127,9 +127,9 @@ function DropdownMenuSubContent({
className={clsx(
`
univer-z-[1080] univer-box-border univer-max-h-[var(--radix-popper-available-height)]
univer-overflow-y-auto univer-rounded-md univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900
univer-shadow-md
dark:univer-bg-gray-700 dark:univer-text-white
data-[side=bottom]:univer-slide-in-from-top-2
data-[side=left]:univer-slide-in-from-right-2
data-[side=right]:univer-slide-in-from-left-2
@@ -139,6 +139,7 @@ function DropdownMenuSubContent({
data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0
data-[state=open]:univer-zoom-in-95
`,
borderClassName,
scrollbarClassName,
className
)}
@@ -160,9 +161,9 @@ function DropdownMenuContent({
className={clsx(
`
univer-z-[1080] univer-box-border univer-max-h-[var(--radix-popper-available-height)]
univer-overflow-y-auto univer-rounded-md univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900
univer-shadow-md
dark:univer-bg-gray-700 dark:univer-text-white
data-[side=bottom]:univer-slide-in-from-top-2
data-[side=left]:univer-slide-in-from-right-2
data-[side=right]:univer-slide-in-from-left-2
@@ -172,6 +173,7 @@ function DropdownMenuContent({
data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0
data-[state=open]:univer-zoom-in-95
`,
borderClassName,
scrollbarClassName,
className
)}
packages/design/src/components/dropdown/Dropdown.stories.tsx
+5 -4
View File
@@ -16,6 +16,8 @@
import type { Meta } from '@storybook/react';
import { borderClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
import { Dropdown } from './Dropdown';
const meta: Meta<typeof Dropdown> = {
@@ -53,11 +55,10 @@ export const Playground = {
)}
>
<a
className={`
univer-cursor-pointer univer-rounded-lg univer-border univer-border-solid
univer-border-gray-200 univer-px-4 univer-py-2 univer-transition-all
className={clsx(`
univer-cursor-pointer univer-rounded-lg univer-px-4 univer-py-2 univer-transition-all
hover:univer-bg-gray-100
`}
`, borderClassName)}
>
Click me
</a>
packages/design/src/components/dropdown/PopoverPrimitive.tsx
+4 -4
View File
@@ -16,8 +16,8 @@
import type { ComponentProps } from 'react';
import { Anchor, Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
import { borderClassName, scrollbarClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
import { scrollbarClassName } from '../../helper/scrollbar-cls';
function PopoverPrimitive({
...props
@@ -46,9 +46,8 @@ function PopoverContent({
className={clsx(
`
univer-z-[1080] univer-max-h-[var(--radix-popper-available-height)] univer-overflow-y-auto
univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-text-gray-900 univer-shadow-md univer-outline-hidden
dark:univer-border-gray-600 dark:univer-bg-gray-900
univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md univer-outline-hidden
dark:univer-bg-gray-900
data-[side=bottom]:univer-slide-in-from-top-2
data-[side=left]:univer-slide-in-from-right-2
data-[side=right]:univer-slide-in-from-left-2
@@ -58,6 +57,7 @@ function PopoverContent({
data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0
data-[state=open]:univer-zoom-in-95
`,
borderClassName,
scrollbarClassName,
className
)}
packages/design/src/components/input-number/InputNumber.tsx
+2
View File
@@ -331,6 +331,7 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
univer-h-[calc(100%-2px)] univer-w-6 univer-flex-col univer-border univer-border-y-0
univer-border-l univer-border-r-0 univer-border-solid univer-border-gray-200
univer-border-l-gray-200
dark:univer-border-gray-600
`,
controlsClassName
)}
@@ -341,6 +342,7 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
univer-border-none !univer-bg-transparent univer-text-xs
after:univer-absolute after:-univer-bottom-px after:univer-block after:univer-h-px
after:univer-w-full after:univer-bg-gray-200 after:univer-content-['']
dark:after:univer-bg-gray-600
`}
tabIndex={-1}
disabled={disabled || (max !== undefined && internalValue !== null && internalValue >= max)}
packages/design/src/components/input/Input.tsx
+4 -3
View File
@@ -18,15 +18,15 @@ import type { VariantProps } from 'class-variance-authority';
import { CloseSingle } from '@univerjs/icons';
import { cva } from 'class-variance-authority';
import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
import { borderClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
export const inputVariants = cva(
`
univer-box-border univer-w-full univer-rounded-md univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-transition-colors univer-duration-200
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200
dark:univer-bg-gray-700 dark:univer-text-white
focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-600/20
placeholder:univer-text-gray-400
`,
@@ -131,6 +131,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
type={type}
className={clsx(
inputVariants({ size }),
borderClassName,
disabled && `
univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400
dark:univer-text-gray-500
packages/design/src/components/kbd/Kbd.tsx
+5 -5
View File
@@ -15,6 +15,7 @@
*/
import { Fragment } from 'react/jsx-runtime';
import { borderClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
export interface IKBDProps {
@@ -30,11 +31,10 @@ export function KBD(props: IKBDProps) {
return (
<span
className={clsx(`
univer-inline-block univer-h-6 univer-select-none univer-rounded-md univer-border univer-border-solid
univer-border-gray-200 univer-bg-gray-50 univer-px-2 univer-font-mono univer-text-xs/6 univer-font-medium
univer-text-gray-700
dark:univer-border-gray-500 dark:univer-bg-gray-700 dark:univer-text-white
`, className)}
univer-inline-block univer-h-6 univer-select-none univer-rounded-md univer-bg-gray-50 univer-px-2
univer-font-mono univer-text-xs/6 univer-font-medium univer-text-gray-700
dark:univer-bg-gray-700 dark:univer-text-white
`, borderClassName, className)}
>
{keys.map((text, index) => (
<Fragment key={index}>
packages/design/src/components/menu/Menu.tsx
+5 -4
View File
@@ -76,13 +76,14 @@ export function TinyMenuGroup({ items }: ITinyMenuGroupProps) {
const ele = (
<div
key={item.key}
className={`
className={clsx(`
univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center
univer-rounded-md
dark:hover:univer-bg-gray-900
hover:univer-bg-gray-50
${item.active ? 'univer-bg-gray-50' : ''}
${item.className}
`}
`, {
'univer-bg-gray-50 dark:univer-bg-gray-900': item.active,
}, item.className)}
onClick={() => item.onClick()}
>
<item.Icon className="univer-size-4 univer-text-gray-900" />
packages/design/src/components/message/Message.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ const Message = ({ content, type = MessageType.Info }: IMessageProps) => {
univer-min-w-[320px] univer-max-w-[480px] univer-rounded-xl univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-p-4 univer-font-sans univer-shadow-md
univer-transition-all univer-duration-300 univer-animate-in univer-fade-in univer-slide-in-from-top-4
dark:univer-border-gray-700 dark:univer-bg-gray-700
dark:univer-border-gray-600 dark:univer-bg-gray-700
`
)}
>
packages/design/src/components/select-list/SelectList.tsx
+5 -5
View File
@@ -15,8 +15,8 @@
*/
import { CheckMarkSingle } from '@univerjs/icons';
import { borderClassName, scrollbarClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
import { scrollbarClassName } from '../../helper/scrollbar-cls';
export interface ISelectListProps {
/**
@@ -85,8 +85,8 @@ export function SelectList(props: ISelectListProps) {
<ul
className={clsx(`
univer-m-0 univer-grid univer-max-h-80 univer-list-none univer-gap-1 univer-overflow-y-auto univer-rounded
univer-border univer-border-solid univer-border-gray-200 univer-p-1.5
`, scrollbarClassName, className)}
univer-p-1.5
`, borderClassName, scrollbarClassName, className)}
>
{options.map((option, index) => {
const checked = value.indexOf(option.value) > -1;
@@ -95,8 +95,8 @@ export function SelectList(props: ISelectListProps) {
<a
className={clsx(`
univer-relative univer-block univer-cursor-pointer univer-select-none univer-rounded
univer-py-1.5 univer-pl-8 univer-pr-2 univer-text-sm univer-transition-colors
univer-text-gray-900
univer-py-1.5 univer-pl-8 univer-pr-2 univer-text-sm univer-text-gray-900
univer-transition-colors
dark:univer-text-white dark:hover:univer-bg-gray-600
hover:univer-bg-gray-100
`, optionClassName, {
packages/design/src/components/select/MultipleSelect.tsx
+6 -5
View File
@@ -18,6 +18,7 @@ import type { ReactNode } from 'react';
import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu';
import { MoreDownSingle } from '@univerjs/icons';
import { useMemo, useState } from 'react';
import { borderClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
import { Badge } from '../badge/Badge';
import { DropdownMenu } from '../dropdown-menu/DropdownMenu';
@@ -126,10 +127,10 @@ export function MultipleSelect(props: IMultipleSelectProps) {
data-u-comp="multiple-select"
className={clsx(`
univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center
univer-justify-between univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-px-2.5 univer-transition-colors univer-duration-200
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
`, {
univer-justify-between univer-rounded-lg univer-bg-white univer-px-2.5 univer-transition-colors
univer-duration-200
dark:univer-bg-gray-700 dark:univer-text-white
`, borderClassName, {
'univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-600/20': open && !borderless,
'univer-border-transparent univer-bg-transparent hover:univer-border-transparent': borderless,
'univer-cursor-not-allowed': disabled,
@@ -138,7 +139,7 @@ export function MultipleSelect(props: IMultipleSelectProps) {
}, className)}
>
<div
className="univer-flex univer-gap-2 univer-box-border univer-pr-2 univer-w-[calc(100%-16px)]"
className="univer-box-border univer-flex univer-w-[calc(100%-16px)] univer-gap-2 univer-pr-2"
>
{displayValue}
</div>
packages/design/src/components/select/Select.tsx
+5 -4
View File
@@ -18,6 +18,7 @@ import type { ReactNode } from 'react';
import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu';
import { MoreDownSingle } from '@univerjs/icons';
import { useMemo, useState } from 'react';
import { borderClassName } from '../../helper/class-utilities';
import { clsx } from '../../helper/clsx';
import { DropdownMenu } from '../dropdown-menu/DropdownMenu';
@@ -150,10 +151,10 @@ export function Select(props: ISelectProps) {
data-u-comp="select"
className={clsx(`
univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center
univer-justify-between univer-gap-2 univer-rounded-lg univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-px-2.5 univer-transition-colors univer-duration-200
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
`, {
univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-white univer-px-2.5
univer-transition-colors univer-duration-200
dark:univer-bg-gray-700 dark:univer-text-white
`, borderClassName, {
'univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-600/20': open && !borderless,
'univer-border-transparent univer-bg-transparent hover:univer-border-transparent': borderless,
'univer-cursor-not-allowed': disabled,
packages/design/src/helper/class-utilities.ts
+28
View File
@@ -0,0 +1,28 @@
/**
* 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 { clsx } from './clsx';
export const scrollbarClassName = 'univer-scrollbar-thin univer-scrollbar-track-gray-50 univer-scrollbar-thumb-gray-300 dark:univer-scrollbar-track-gray-900 dark:univer-scrollbar-thumb-gray-700';
const borderBasicClassName = 'univer-border-gray-200 dark:univer-border-gray-600 univer-border-solid';
export const borderClassName = clsx(borderBasicClassName, 'univer-border');
export const borderLeftBottomClassName = clsx(borderBasicClassName, 'univer-border-l univer-border-b univer-border-0');
export const borderLeftClassName = clsx(borderBasicClassName, 'univer-border-l univer-border-0');
export const borderTopClassName = clsx(borderBasicClassName, 'univer-border-t univer-border-0');
export const borderBottomClassName = clsx(borderBasicClassName, 'univer-border-b univer-border-0');
export const borderRightClassName = clsx(borderBasicClassName, 'univer-border-r univer-border-0');
export const divideYClassName = 'univer-divide-gray-200 dark:univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid';
packages/design/src/helper/clsx.tsx → packages/design/src/helper/clsx.ts
View File
packages/design/src/helper/scrollbar-cls.ts
-17
View File
@@ -1,17 +0,0 @@
/**
* Copyright 2023-present DreamNum Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const scrollbarClassName = 'univer-scrollbar-thin univer-scrollbar-track-gray-50 univer-scrollbar-thumb-gray-300 dark:univer-bg-black dark:univer-scrollbar-track-gray-900 dark:univer-scrollbar-thumb-gray-700';
packages/design/src/index.ts
+10 -1
View File
@@ -64,7 +64,16 @@ export { clsx } from './helper/clsx';
export { resizeObserverCtor } from './helper/resize-observer';
export { render, unmount } from './helper/react-dom';
export { isBrowser } from './helper/is-browser';
export { scrollbarClassName } from './helper/scrollbar-cls';
export {
borderBottomClassName,
borderClassName,
borderLeftBottomClassName,
borderLeftClassName,
borderRightClassName,
borderTopClassName,
divideYClassName,
scrollbarClassName,
} from './helper/class-utilities';
/** @deprecated Only for compatibility with versions before 0.7.0, will be removed in future versions */
export { defaultTheme, greenTheme } from '@univerjs/themes';
packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPosition.tsx
+2 -4
View File
@@ -18,7 +18,7 @@ import type { ICommandInfo, IDrawingParam, IObjectPositionH, IObjectPositionV, N
import type { IDocDrawing } from '@univerjs/docs-drawing';
import type { IDocumentSkeletonDrawing } from '@univerjs/engine-render';
import { DocumentFlavor, ICommandService, IUniverInstanceService, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType } from '@univerjs/core';
import { Checkbox, InputNumber, Select } from '@univerjs/design';
import { borderTopClassName, Checkbox, clsx, InputNumber, Select } from '@univerjs/design';
import { DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
import { DocSelectionRenderService } from '@univerjs/docs-ui';
import { IDrawingManagerService } from '@univerjs/drawing';
@@ -360,9 +360,7 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
return (
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-t univer-border-solid univer-border-gray-200
`}
className={clsx('univer-relative univer-mt-5 univer-w-full', borderTopClassName)}
style={{ display: showPanel ? 'block' : 'none' }}
>
<div
packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingTextWrap.tsx
+4 -5
View File
@@ -17,7 +17,7 @@
import type { ICommandInfo, IDrawingParam, Nullable } from '@univerjs/core';
import type { IDocDrawing } from '@univerjs/docs-drawing';
import { BooleanNumber, ICommandService, IUniverInstanceService, LocaleService, PositionedObjectLayoutType, WrapTextType } from '@univerjs/core';
import { clsx, InputNumber, Radio, RadioGroup } from '@univerjs/design';
import { borderTopClassName, clsx, InputNumber, Radio, RadioGroup } from '@univerjs/design';
import { RichTextEditingMutation } from '@univerjs/docs';
import { IDrawingManagerService } from '@univerjs/drawing';
import { IRenderManagerService } from '@univerjs/engine-render';
@@ -263,10 +263,9 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
return (
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-t univer-border-solid univer-border-gray-200
`}
style={{ display: showPanel ? 'block' : 'none' }}
className={clsx('univer-relative univer-mt-5 univer-w-full', borderTopClassName, {
'univer-hidden': !showPanel,
})}
>
<div
className={`
packages/docs-hyper-link-ui/src/views/hyper-link-edit/index.tsx
+4 -5
View File
@@ -16,7 +16,7 @@
import type { DocumentDataModel } from '@univerjs/core';
import { BuildTextUtils, getBodySlice, ICommandService, IUniverInstanceService, LocaleService, Tools, UniverInstanceType } from '@univerjs/core';
import { Button, FormLayout, Input } from '@univerjs/design';
import { borderClassName, Button, clsx, FormLayout, Input } from '@univerjs/design';
import { DocSelectionManagerService } from '@univerjs/docs';
import { KeyCode, useDependency, useObservable } from '@univerjs/ui';
import { useEffect, useState } from 'react';
@@ -115,10 +115,9 @@ export const DocHyperLinkEdit = () => {
return (
<div
className={`
univer-box-border univer-w-[328px] univer-rounded-xl univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-px-6 univer-py-5 univer-shadow
`}
className={clsx(`
univer-box-border univer-w-[328px] univer-rounded-xl univer-bg-white univer-px-6 univer-py-5 univer-shadow
`, borderClassName)}
>
<div>
{editing
packages/docs-hyper-link-ui/src/views/hyper-link-popup/index.tsx
+6 -6
View File
@@ -16,7 +16,7 @@
import type { DocumentDataModel } from '@univerjs/core';
import { CustomRangeType, ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { MessageType, Tooltip } from '@univerjs/design';
import { borderClassName, clsx, MessageType, Tooltip } from '@univerjs/design';
import { CopySingle, LinkSingle, UnlinkSingle, WriteSingle } from '@univerjs/icons';
import { IMessageService, useDependency, useObservable } from '@univerjs/ui';
import { DeleteDocHyperLinkCommand } from '../../commands/commands/delete-link.command';
@@ -47,11 +47,11 @@ export const DocLinkPopup = () => {
return (
<div
className={`
univer-box-border univer-flex univer-max-w-[328px] univer-items-center univer-justify-between
univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-3 univer-shadow
`}
className={clsx(`
univer-box-border univer-flex univer-max-w-80 univer-items-center univer-justify-between
univer-overflow-hidden univer-rounded-lg univer-bg-white univer-p-3 univer-shadow
dark:univer-bg-gray-900
`, borderClassName)}
onClick={() => {
hyperLinkService.hideInfoPopup();
}}
packages/docs-mention-ui/src/views/mention-list/index.tsx
+5 -5
View File
@@ -15,7 +15,7 @@
*/
import type { IMention, ITypeMentionList } from '@univerjs/core';
import { clsx } from '@univerjs/design';
import { borderClassName, clsx } from '@univerjs/design';
import { useRef, useState } from 'react';
export interface IMentionListProps {
@@ -39,10 +39,10 @@ export const MentionList = (props: IMentionListProps) => {
ref={ref}
data-editorid={editorId}
tabIndex={0}
className={`
univer-max-h-72 univer-w-72 univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-p-2 univer-shadow-md
`}
className={clsx(`
univer-max-h-72 univer-w-72 univer-overflow-hidden univer-rounded-lg univer-bg-white univer-p-2
univer-shadow-md
`, borderClassName)}
onClick={onClick}
>
{mentions.map((typeMentions) => (
packages/docs-quick-insert-ui/src/views/menu/index.tsx
+8 -6
View File
@@ -17,6 +17,7 @@
import type { DocumentDataModel } from '@univerjs/core';
import type { IDocPopup } from '../../services/doc-quick-insert-popup.service';
import { IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
import { borderClassName, clsx } from '@univerjs/design';
import { DocSelectionManagerService } from '@univerjs/docs';
import { IRenderManagerService } from '@univerjs/engine-render';
import { PlusSingle } from '@univerjs/icons';
@@ -75,16 +76,17 @@ export const QuickInsertButton = ({ className = '' }: IQuickInsertButtonProps) =
});
return (
<div
className={`
className={clsx(`
univer-mr-1 univer-flex univer-cursor-pointer univer-items-center univer-gap-2.5 univer-rounded-full
univer-border univer-border-solid univer-border-gray-200 univer-p-1.5 univer-shadow-sm
univer-p-1.5 univer-shadow-sm
hover:univer-bg-gray-100
${className}
${editPopup ? 'univer-bg-gray-100' : 'univer-bg-white'}
`}
onClick={onClick}
`, borderClassName, {
'univer-bg-gray-100': editPopup,
'univer-bg-white': !editPopup,
}, className)}
role="button"
tabIndex={0}
onClick={onClick}
>
<PlusSingle className="univer-text-gray-800" />
</div>
packages/docs-ui/src/components/float-toolbar/FloatToolbar.tsx
+5 -4
View File
@@ -15,6 +15,7 @@
*/
import type { IMenuSchema } from '@univerjs/ui';
import { borderClassName, clsx } from '@univerjs/design';
import { IMenuManagerService, MenuManagerPosition, ToolbarItem, useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import {
@@ -77,10 +78,10 @@ export function FloatToolbar(props: IFloatToolbarProps) {
return (
<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-sm
`}
className={clsx(`
univer-box-border univer-flex univer-rounded univer-bg-white univer-py-1.5 univer-shadow-sm
dark:univer-bg-gray-900
`, borderClassName)}
>
{menus.map((groupItem) => groupItem.item && (
<div key={groupItem.key} className="univer-flex univer-flex-nowrap univer-gap-2 univer-px-2">
packages/docs-ui/src/components/list-type-picker/picker.tsx
+3 -3
View File
@@ -15,7 +15,7 @@
*/
import { PresetListType } from '@univerjs/core';
import { clsx } from '@univerjs/design';
import { borderClassName, clsx } from '@univerjs/design';
export interface IListTypePickerBaseProps {
value?: PresetListType;
@@ -36,9 +36,9 @@ export const ListTypePicker = (props: IListTypePickerProps) => {
key={item.value}
className={clsx(`
univer-block univer-h-20 univer-w-[72px] univer-cursor-pointer univer-overflow-hidden
univer-rounded univer-border univer-border-solid univer-border-gray-200 univer-transition-all
univer-rounded univer-transition-all
hover:univer-border-primary-500
`, {
`, borderClassName, {
'univer-border-primary-500': value === item.value,
})}
onClick={() => {
packages/docs-ui/src/components/paragraph-menu/index.tsx
+7 -5
View File
@@ -17,6 +17,7 @@
import type { DocumentDataModel } from '@univerjs/core';
import type { IPopup } from '@univerjs/ui';
import { ICommandService, IUniverInstanceService, NamedStyleType, UniverInstanceType } from '@univerjs/core';
import { borderClassName, clsx } from '@univerjs/design';
import { IRenderManagerService } from '@univerjs/engine-render';
import { DownSingle } from '@univerjs/icons';
import { ContextMenuPosition, DesktopMenu, ILayoutService, RectPopup, useDependency, useObservable } from '@univerjs/ui';
@@ -60,14 +61,15 @@ export const ParagraphMenu = ({ popup }: { popup: IPopup }) => {
return (
<>
<div
ref={anchorRef}
className={`
className={clsx(`
univer-mr-1 univer-inline-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1
univer-rounded-full univer-border univer-border-solid univer-border-gray-200 univer-px-2.5 univer-py-0
univer-rounded-full univer-px-2.5 univer-py-0
hover:univer-bg-gray-100
${visible ? 'univer-bg-gray-100' : 'univer-bg-white'}
`}
`, borderClassName, {
'univer-bg-gray-100': visible,
'univer-bg-white': !visible,
})}
onMouseEnter={(e) => {
popup.onPointerEnter?.(e);
isMouseOver.current = true;
packages/docs-ui/src/views/paragraph-setting/Setting.tsx
+4 -4
View File
@@ -15,7 +15,7 @@
*/
import { HorizontalAlign, LocaleService, SpacingRule } from '@univerjs/core';
import { clsx, InputNumber, Select, Tooltip } from '@univerjs/design';
import { borderClassName, clsx, InputNumber, Select, Tooltip } from '@univerjs/design';
import { AlignTextBothSingle, HorizontallySingle, LeftJustifyingSingle, RightJustifyingSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
import { useMemo, useRef } from 'react';
@@ -96,10 +96,10 @@ export function ParagraphSetting() {
<div>
<div className="univer-t-4 univer-text-sm univer-font-medium">{localeService.t('doc.paragraphSetting.alignment')}</div>
<div
className={`
className={clsx(`
univer-mt-4 univer-box-border univer-flex univer-w-full univer-items-center univer-justify-between
univer-gap-1 univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-p-1
`}
univer-gap-1 univer-rounded-md univer-p-1
`, borderClassName)}
>
{alignmentOptions.map((item) => {
return (
packages/docs-ui/src/views/rich-text-editor/index.tsx
+4 -4
View File
@@ -19,7 +19,7 @@ import type { ReactNode } from 'react';
import type { Editor } from '../../services/editor/editor';
import type { IKeyboardEventConfig } from './hooks';
import { BuildTextUtils, createInternalEditorID, generateRandomId, getPlainText } from '@univerjs/core';
import { clsx } from '@univerjs/design';
import { borderClassName, clsx } from '@univerjs/design';
import { DocSkeletonManagerService } from '@univerjs/docs';
import { IRenderManagerService } from '@univerjs/engine-render';
import { useDependency, useEvent, useObservable } from '@univerjs/ui';
@@ -161,9 +161,9 @@ export const RichTextEditor = (props: IRichTextEditorProps) => {
<div
className={clsx(`
univer-relative univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center
univer-justify-around univer-gap-2 univer-rounded univer-border univer-border-solid
univer-border-gray-200 univer-pb-0.5 univer-pl-1.5 univer-pr-2 univer-pt-1.5
`, {
univer-justify-around univer-gap-2 univer-rounded-md univer-pb-0.5 univer-pl-1.5 univer-pr-2
univer-pt-1.5
`, borderClassName, {
'univer-border-primary-500': isFocusing,
})}
style={{ height }}
packages/drawing-ui/src/views/image-popup-menu/ImagePopupMenu.tsx
+12 -7
View File
@@ -16,7 +16,7 @@
import type { IDrawingSearch } from '@univerjs/core';
import { ICommandService, LocaleService } from '@univerjs/core';
import { clsx, DropdownMenu } from '@univerjs/design';
import { borderClassName, clsx, DropdownMenu } from '@univerjs/design';
import { Autofill, MoreDownSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
import React, { useState } from 'react';
@@ -90,15 +90,20 @@ export const ImagePopupMenu: React.FC<IImagePopupMenuProps> = (props: IImagePopu
>
<div
className={clsx(`
univer-flex univer-items-center univer-gap-2 univer-rounded univer-border univer-border-solid
univer-border-gray-200 univer-p-1
univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1
dark:hover:univer-bg-gray-800
hover:univer-bg-gray-100
`, {
'univer-bg-gray-100': visible,
'univer-bg-white': !visible,
`, borderClassName, {
'univer-bg-gray-100 dark:univer-bg-gray-800': visible,
'univer-bg-white dark:univer-bg-gray-900': !visible,
})}
>
<Autofill className="univer-fill-primary-600 univer-text-gray-900" />
<Autofill
className={`
univer-fill-primary-600 univer-text-gray-900
dark:univer-text-white
`}
/>
{showMore && <MoreDownSingle />}
</div>
</DropdownMenu>
packages/drawing-ui/src/views/panel/DrawingAlign.tsx
+4 -10
View File
@@ -16,7 +16,7 @@
import type { IDrawingParam } from '@univerjs/core';
import { ICommandService, LocaleService } from '@univerjs/core';
import { Select } from '@univerjs/design';
import { borderTopClassName, clsx, Select } from '@univerjs/design';
import { useDependency } from '@univerjs/ui';
import { useState } from 'react';
import { AlignType, SetDrawingAlignOperation } from '../../commands/operations/drawing-align.operation';
@@ -91,17 +91,11 @@ export const DrawingAlign = (props: IDrawingAlignProps) => {
});
}
const gridDisplay = (isShow: boolean) => {
return isShow ? 'block' : 'none';
};
return (
<div
className={`
univer-relative univer-w-full univer-border-l-0 univer-border-r-0 univer-border-t univer-border-solid
univer-border-gray-200
`}
style={{ display: gridDisplay(alignShow) }}
className={clsx('univer-relative univer-w-full', borderTopClassName, {
'univer-hidden': !alignShow,
})}
>
<div
className={`
packages/drawing-ui/src/views/panel/DrawingArrange.tsx
+4 -7
View File
@@ -16,7 +16,7 @@
import type { IDrawingParam } from '@univerjs/core';
import { ArrangeTypeEnum, LocaleService } from '@univerjs/core';
import { Button } from '@univerjs/design';
import { Button, clsx } from '@univerjs/design';
import { IDrawingManagerService } from '@univerjs/drawing';
import { BottomSingle, MoveDownSingle, MoveUpSingle, TopmostSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
@@ -34,10 +34,6 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
const localeService = useDependency(LocaleService);
const drawingManagerService = useDependency(IDrawingManagerService);
const gridDisplay = (isShow: boolean) => {
return isShow ? 'block' : 'none';
};
const [drawings, setDrawings] = useState<IDrawingParam[]>(focusDrawings);
useEffect(() => {
@@ -60,8 +56,9 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
return (
<div
className="univer-relative univer-mt-5 univer-w-full"
style={{ display: gridDisplay(arrangeShow) }}
className={clsx('univer-relative univer-mt-5 univer-w-full', {
'univer-hidden': !arrangeShow,
})}
>
<div className={rowClassName}>
<div className={columnTitleClassName}>
packages/drawing-ui/src/views/panel/DrawingTransform.tsx
+4 -10
View File
@@ -17,7 +17,7 @@
import type { IDrawingParam, Nullable } from '@univerjs/core';
import type { IChangeObserverConfig, Scene } from '@univerjs/engine-render';
import { debounce, LocaleService } from '@univerjs/core';
import { Checkbox, clsx, InputNumber } from '@univerjs/design';
import { borderTopClassName, Checkbox, clsx, InputNumber } from '@univerjs/design';
import { IDrawingManagerService } from '@univerjs/drawing';
import { IRenderManagerService } from '@univerjs/engine-render';
import { useDependency } from '@univerjs/ui';
@@ -362,17 +362,11 @@ export const DrawingTransform = (props: IDrawingTransformProps) => {
transformer.keepRatio = val as boolean;
};
const gridDisplay = (isShow: boolean) => {
return isShow ? 'block' : 'none';
};
return (
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
univer-border-t univer-border-solid univer-border-t-gray-200
`}
style={{ display: gridDisplay(transformShow) }}
className={clsx('univer-relative univer-mt-5 univer-w-full', borderTopClassName, {
'univer-hidden': !transformShow,
})}
>
<div className={rowClassName}>
<div className={clsx(columnTitleClassName)}>
packages/drawing-ui/src/views/panel/ImageCropper.tsx
+4 -10
View File
@@ -16,7 +16,7 @@
import type { IDrawingParam } from '@univerjs/core';
import { ICommandService, LocaleService } from '@univerjs/core';
import { Button, Select } from '@univerjs/design';
import { borderTopClassName, Button, clsx, Select } from '@univerjs/design';
import { CreateCopySingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
import { useEffect, useRef, useState } from 'react';
@@ -111,10 +111,6 @@ export const ImageCropper = (props: IImageCropperProps) => {
}
}
const gridDisplay = (isShow: boolean) => {
return isShow ? 'block' : 'none';
};
const onCropperBtnClick = (val: CropType) => {
commandService.executeCommand(AutoImageCropOperation.id, {
cropType: val,
@@ -124,11 +120,9 @@ export const ImageCropper = (props: IImageCropperProps) => {
return (
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
univer-border-t univer-border-solid univer-border-t-gray-200
`}
style={{ display: gridDisplay(cropperShow) }}
className={clsx('univer-relative univer-mt-5 univer-w-full', borderTopClassName, {
'univer-hidden': !cropperShow,
})}
>
<div className={rowClassName}>
<div className={columnTitleClassName}>
packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/ColorScale.tsx
+5 -6
View File
@@ -19,7 +19,7 @@ import type { IColorScale, IConditionalFormattingRuleConfig } from '@univerjs/sh
import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui';
import type { IStyleEditorProps } from './type';
import { IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { InputNumber, Select } from '@univerjs/design';
import { borderClassName, clsx, InputNumber, Select } from '@univerjs/design';
import { CFRuleType, CFValueType, createDefaultValueByValueType } from '@univerjs/sheets-conditional-formatting';
import { FormulaEditor } from '@univerjs/sheets-formula-ui';
import { useDependency, useSidebarClick } from '@univerjs/ui';
@@ -68,15 +68,14 @@ const TextInput = (props: { id: string; type: CFValueType | 'none'; value: numbe
<div className="univer-ml-1 univer-w-full">
<FormulaEditor
ref={formulaEditorRef}
className={`
className={clsx(`
univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center
univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-pt-2 univer-transition-colors
univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors
[&>div:first-child]:univer-px-2.5
[&>div]:univer-h-5 [&>div]:univer-ring-transparent
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
dark:univer-bg-gray-700 dark:univer-text-white
hover:univer-border-primary-600
`}
`, borderClassName)}
initValue={formulaInitValue as any}
unitId={unitId}
subUnitId={subUnitId}
packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/DataBar.tsx
+5 -6
View File
@@ -19,7 +19,7 @@ import type { IConditionalFormattingRuleConfig, IValueConfig } from '@univerjs/s
import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui';
import type { IStyleEditorProps } from './type';
import { IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { Checkbox, InputNumber, Radio, RadioGroup, Select } from '@univerjs/design';
import { borderClassName, Checkbox, clsx, InputNumber, Radio, RadioGroup, Select } from '@univerjs/design';
import { CFRuleType, CFValueType, createDefaultValueByValueType, defaultDataBarNativeColor, defaultDataBarPositiveColor } from '@univerjs/sheets-conditional-formatting';
import { FormulaEditor } from '@univerjs/sheets-formula-ui';
import { useDependency, useSidebarClick } from '@univerjs/ui';
@@ -64,15 +64,14 @@ const InputText = (props: { disabled?: boolean; id: string; className: string; t
<div className="univer-ml-3 univer-w-full">
<FormulaEditor
ref={formulaEditorRef}
className={`
className={clsx(`
univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center
univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-pt-2 univer-transition-colors
univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors
[&>div:first-child]:univer-px-2.5
[&>div]:univer-h-5 [&>div]:univer-ring-transparent
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
dark:univer-bg-gray-700 dark:univer-text-white
hover:univer-border-primary-600
`}
`, borderClassName)}
initValue={v as any}
unitId={unitId}
subUnitId={subUnitId}
packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/Formula.tsx
+5 -5
View File
@@ -19,6 +19,7 @@ import type { IAverageHighlightCell, IConditionalFormattingRuleConfig, IHighligh
import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui';
import type { IStyleEditorProps } from './type';
import { IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { borderClassName, clsx } from '@univerjs/design';
import { CFRuleType, CFSubRuleType } from '@univerjs/sheets-conditional-formatting';
import { FormulaEditor } from '@univerjs/sheets-formula-ui';
import { useDependency, useSidebarClick } from '@univerjs/ui';
@@ -101,15 +102,14 @@ export const FormulaStyleEditor = (props: IStyleEditorProps) => {
<div className="univer-mt-3">
<FormulaEditor
ref={formulaEditorRef}
className={`
className={clsx(`
univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center
univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-pt-2 univer-transition-colors
univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors
[&>div:first-child]:univer-px-2.5
[&>div]:univer-h-5 [&>div]:univer-ring-transparent
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
dark:univer-bg-gray-700 dark:univer-text-white
hover:univer-border-primary-600
`}
`, borderClassName)}
errorText={formulaError}
isFocus={isFocusFormulaEditor}
initValue={formula as any}
packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/IconSet.tsx
+8 -10
View File
@@ -19,7 +19,7 @@ import type { IIconSet, IIconType } from '@univerjs/sheets-conditional-formattin
import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui';
import type { IStyleEditorProps } from './type';
import { get, IUniverInstanceService, LocaleService, set, Tools, UniverInstanceType } from '@univerjs/core';
import { Checkbox, clsx, Dropdown, InputNumber, Select } from '@univerjs/design';
import { borderClassName, Checkbox, clsx, Dropdown, InputNumber, Select } from '@univerjs/design';
import { MoreDownSingle, SlashSingle } from '@univerjs/icons';
import {
CFNumberOperator,
@@ -298,13 +298,12 @@ const IconSetRuleEdit = (props: {
)}
>
<div
className={`
className={clsx(`
univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center
univer-justify-between univer-rounded-md univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-px-4 univer-py-2 univer-text-xs
univer-text-gray-600 univer-transition-all
univer-justify-between univer-rounded-md univer-bg-white univer-px-4 univer-py-2
univer-text-xs univer-text-gray-600 univer-transition-all
hover:univer-border-primary-600
`}
`, borderClassName)}
>
{icon
? <img src={icon} className="univer-size-4" draggable={false} />
@@ -568,11 +567,10 @@ export const IconSet = (props: IStyleEditorProps<unknown, IIconSet>) => {
<div
className={clsx(`
univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center
univer-justify-between univer-rounded-md univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-px-4 univer-py-2 univer-text-xs
univer-text-gray-600 univer-transition-all
univer-justify-between univer-rounded-md univer-bg-white univer-px-4 univer-py-2
univer-text-xs univer-text-gray-600 univer-transition-all
hover:univer-border-primary-600
`)}
`, borderClassName)}
>
{previewIcon}
<MoreDownSingle />
packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/styles.ts
+3 -1
View File
@@ -14,4 +14,6 @@
* limitations under the License.
*/
export const previewClassName = 'univer-mt-5 univer-px-1 univer-py-2 univer-border univer-border-solid univer-border-gray-200 univer-rounded';
import { borderClassName, clsx } from '@univerjs/design';
export const previewClassName = clsx('univer-mt-5 univer-px-1 univer-py-2 univer-rounded', borderClassName);
packages/sheets-crosshair-highlight/src/views/components/CrosshairHighlight.tsx
+4 -4
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { clsx } from '@univerjs/design';
import { borderClassName, clsx } from '@univerjs/design';
import { useDependency, useObservable } from '@univerjs/ui';
import { useCallback } from 'react';
import { CROSSHAIR_HIGHLIGHT_COLORS, SheetsCrosshairHighlightService } from '../../services/crosshair.service';
@@ -41,10 +41,10 @@ export function CrosshairOverlay(props: ICrosshairOverlayProps) {
<div
key={color}
className={clsx(`
univer-box-border univer-size-5 univer-cursor-pointer univer-rounded univer-border
univer-border-solid univer-border-gray-200 univer-ring-offset-1 univer-transition-shadow
univer-box-border univer-size-5 univer-cursor-pointer univer-rounded univer-ring-offset-1
univer-transition-shadow
hover:univer-ring-[1.5px] hover:univer-ring-primary-600/40
`, {
`, borderClassName, {
'univer-ring-[1.5px] univer-ring-primary-600 hover:univer-ring-primary-600': color === currentColor,
})}
style={{ backgroundColor: color }}
packages/sheets-data-validation-ui/src/views/components/formula-input/CustomFormulaInput.tsx
+5 -6
View File
@@ -16,7 +16,7 @@
import type { IFormulaInputProps } from '@univerjs/data-validation';
import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui';
import { FormLayout } from '@univerjs/design';
import { borderClassName, clsx, FormLayout } from '@univerjs/design';
import { FormulaEditor } from '@univerjs/sheets-formula-ui';
import { useSidebarClick } from '@univerjs/ui';
import { useRef, useState } from 'react';
@@ -36,15 +36,14 @@ export function CustomFormulaInput(props: IFormulaInputProps) {
<FormLayout error={formula1Res}>
<FormulaEditor
ref={formulaEditorRef}
className={`
className={clsx(`
univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg
univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-pt-2
univer-transition-colors
univer-bg-white univer-pt-2 univer-transition-colors
[&>div:first-child]:univer-px-2.5
[&>div]:univer-h-5 [&>div]:univer-ring-transparent
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
dark:univer-bg-gray-700 dark:univer-text-white
hover:univer-border-primary-600
`}
`, borderClassName)}
initValue={value?.formula1 ?? '=' as any}
unitId={unitId}
subUnitId={subUnitId}
packages/sheets-data-validation-ui/src/views/components/formula-input/ListFormulaInput.tsx
+12 -19
View File
@@ -20,7 +20,7 @@ import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui';
import type { CSSProperties } from 'react';
import { DataValidationType, isFormulaString, LocaleService, Tools } from '@univerjs/core';
import { DataValidationModel, DataValidatorRegistryService } from '@univerjs/data-validation';
import { clsx, DraggableList, Dropdown, FormLayout, Input, Radio, RadioGroup } from '@univerjs/design';
import { borderClassName, clsx, DraggableList, Dropdown, FormLayout, Input, Radio, RadioGroup } from '@univerjs/design';
import { DeleteSingle, IncreaseSingle, MoreDownSingle, SequenceSingle } from '@univerjs/icons';
import { DataValidationFormulaController, deserializeListOptions, serializeListOptions } from '@univerjs/sheets-data-validation';
import { FormulaEditor } from '@univerjs/sheets-formula-ui';
@@ -90,10 +90,7 @@ const ColorSelect = (props: IColorSelectProps) => {
(color) => (
<div
key={color}
className={`
univer-box-border univer-size-4 univer-cursor-pointer univer-rounded univer-border
univer-border-solid univer-border-gray-200
`}
className={clsx('univer-box-border univer-size-4 univer-cursor-pointer univer-rounded', borderClassName)}
style={{ background: color }}
onClick={() => {
onChange(color);
@@ -106,19 +103,16 @@ const ColorSelect = (props: IColorSelectProps) => {
)}
>
<div
className={`
className={clsx(`
univer-box-border univer-inline-flex univer-h-8 univer-w-16 univer-cursor-pointer univer-items-center
univer-justify-between univer-gap-2 univer-rounded-lg univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-px-2.5 univer-transition-colors univer-duration-200
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-white univer-px-2.5
univer-transition-colors univer-duration-200
dark:univer-bg-gray-700 dark:univer-text-white
hover:univer-border-primary-600
`}
`, borderClassName)}
>
<div
className={`
univer-box-border univer-h-4 univer-w-4 univer-rounded univer-border univer-border-gray-200
univer-text-base
`}
className="univer-box-border univer-h-4 univer-w-4 univer-rounded univer-text-base"
style={{ background: value }}
/>
@@ -362,15 +356,14 @@ export function ListFormulaInput(props: IFormulaInputProps) {
<FormLayout error={(formula1Res || localError) || undefined}>
<FormulaEditor
ref={formulaEditorRef}
className={`
className={clsx(`
univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center
univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-pt-2 univer-transition-colors
univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors
[&>div:first-child]:univer-px-2.5
[&>div]:univer-h-5 [&>div]:univer-ring-transparent
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
dark:univer-bg-gray-700 dark:univer-text-white
hover:univer-border-primary-600
`}
`, borderClassName)}
initValue={formulaStr as any}
unitId={unitId}
subUnitId={subUnitId}
packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingAnchor.tsx
+4 -10
View File
@@ -18,7 +18,7 @@ import type { IDrawingParam, Nullable } from '@univerjs/core';
import type { BaseObject } from '@univerjs/engine-render';
import type { ISheetDrawing } from '@univerjs/sheets-drawing';
import { ICommandService, LocaleService } from '@univerjs/core';
import { Radio, RadioGroup } from '@univerjs/design';
import { borderTopClassName, clsx, Radio, RadioGroup } from '@univerjs/design';
import { IDrawingManagerService } from '@univerjs/drawing';
import { IRenderManagerService } from '@univerjs/engine-render';
import { SheetDrawingAnchorType } from '@univerjs/sheets-drawing';
@@ -134,17 +134,11 @@ export const SheetDrawingAnchor = (props: ISheetDrawingAnchorProps) => {
});
}
const gridDisplay = (isShow: boolean) => {
return isShow ? 'block' : 'none';
};
return (
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
univer-border-t univer-border-solid univer-border-gray-200
`}
style={{ display: gridDisplay(anchorShow) }}
className={clsx('univer-relative univer-mt-5 univer-w-full', borderTopClassName, {
'univer-hidden': !anchorShow,
})}
>
<div
className={`
packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx
+7 -8
View File
@@ -18,7 +18,7 @@ import type { ISelectProps } from '@univerjs/design';
import type { FilterOperator, IFilterConditionFormParams } from '../../models/conditions';
import type { ByConditionsModel } from '../../services/sheets-filter-panel.service';
import { LocaleService } from '@univerjs/core';
import { Input, Radio, RadioGroup, Select } from '@univerjs/design';
import { borderClassName, clsx, Input, Radio, RadioGroup, Select } from '@univerjs/design';
import { useDependency, useObservable } from '@univerjs/ui';
import React, { useCallback, useMemo } from 'react';
@@ -83,7 +83,7 @@ export function FilterByCondition(props: { model: ByConditionsModel }) {
return (
<div
data-univer-comp-sheets-filter-panel-conditions-container
data-u-comp="sheets-filter-panel-conditions-container"
className="univer-flex univer-h-full univer-flex-col"
>
{/* primary condition */}
@@ -93,16 +93,15 @@ export function FilterByCondition(props: { model: ByConditionsModel }) {
{FilterConditionItems.getItemByOperator(condition.operator).numOfParameters !== 0
? (
<div
data-univer-comp-sheets-filter-panel-conditions-container-inner
className={`
univer-mt-2 univer-flex-grow univer-overflow-hidden univer-rounded-md univer-border
univer-border-solid univer-border-gray-200 univer-p-2
`}
data-u-comp="sheets-filter-panel-conditions-container-inner"
className={clsx(`
univer-mt-2 univer-flex-grow univer-overflow-hidden univer-rounded-md univer-p-2
`, borderClassName)}
>
{condition.numOfParameters >= 1 && renderSecondaryCondition(formParams.operator1!, formParams.val1 ?? '', 'operator1')}
{condition.numOfParameters >= 2 && renderSecondaryCondition(formParams.operator2!, formParams.val2 ?? '', 'operator2')}
<div
data-univer-comp-sheets-filter-panel-conditions-desc
data-u-comp="sheets-filter-panel-conditions-desc"
className="univer-mt-2 univer-text-xs univer-text-gray-500"
>
{localeService.t('sheets-filter.panel.?')}
packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx
+12 -12
View File
@@ -16,7 +16,7 @@
import type { ByValuesModel, IFilterByValueWithTreeItem } from '../../services/sheets-filter-panel.service';
import { LocaleService } from '@univerjs/core';
import { Checkbox, Input, Tree } from '@univerjs/design';
import { borderClassName, Checkbox, clsx, Input, Tree } from '@univerjs/design';
import { useDependency, useObservable } from '@univerjs/ui';
import React, { useCallback } from 'react';
import { statisticFilterByValueItems } from '../../models/utils';
@@ -62,7 +62,7 @@ export function FilterByValue(props: { model: ByValuesModel }) {
return (
<div
data-univer-comp-sheets-filter-panel-values-container
data-u-comp="sheets-filter-panel-values-container"
className="univer-flex univer-h-full univer-flex-col"
>
<Input
@@ -72,19 +72,19 @@ export function FilterByValue(props: { model: ByValuesModel }) {
onChange={onSearchValueChange}
/>
<div
data-univer-comp-sheets-filter-panel
className={`
data-u-comp="sheets-filter-panel"
className={clsx(`
univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden
univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-px-2 univer-py-2.5
`}
univer-rounded-md univer-px-2 univer-py-2.5
`, borderClassName)}
>
{/* The on-top "Select All" button */}
<div
data-univer-comp-sheets-filter-panel-values-item
data-u-comp="sheets-filter-panel-values-item"
className="univer-box-border univer-h-8 univer-w-full univer-py-0.5"
>
<div
data-univer-comp-sheets-filter-panel-values-item-inner
data-u-comp="sheets-filter-panel-values-item-inner"
className={`
univer-box-border univer-flex univer-h-7 univer-items-center univer-rounded-md univer-pb-0
univer-pl-5 univer-pr-0.5 univer-pt-0 univer-text-sm
@@ -97,7 +97,7 @@ export function FilterByValue(props: { model: ByValuesModel }) {
onChange={onCheckAllToggled}
/>
<span
data-univer-comp-sheets-filter-panel-values-item-text
data-u-comp="sheets-filter-panel-values-item-text"
className={`
univer-mx-1 univer-inline-block univer-flex-shrink univer-overflow-hidden
univer-text-ellipsis univer-whitespace-nowrap univer-text-gray-950
@@ -107,7 +107,7 @@ export function FilterByValue(props: { model: ByValuesModel }) {
{`${localeService.t('sheets-filter.panel.select-all')}`}
</span>
<span
data-univer-comp-sheets-filter-panel-values-item-count
data-u-comp="sheets-filter-panel-values-item-count"
className={`
univer-text-gray-400
dark:univer-text-gray-500
@@ -117,7 +117,7 @@ export function FilterByValue(props: { model: ByValuesModel }) {
</span>
</div>
</div>
<div data-univer-comp-sheets-filter-panel-values-virtual className="univer-flex-grow">
<div data-u-comp="sheets-filter-panel-values-virtual" className="univer-flex-grow">
<Tree
data={items}
defaultExpandAll={false}
@@ -143,7 +143,7 @@ export function FilterByValue(props: { model: ByValuesModel }) {
`}
>
<span
data-univer-comp-sheets-filter-panel-values-item-count
data-u-comp="sheets-filter-panel-values-item-count"
className={`
univer-text-gray-400
dark:univer-text-gray-500
packages/sheets-formula-ui/src/views/formula-editor/help-function/HelpFunction.tsx
+13 -14
View File
@@ -17,6 +17,7 @@
import type { Editor } from '@univerjs/docs-ui';
import type { IFunctionParam } from '@univerjs/engine-formula';
import { LocaleService } from '@univerjs/core';
import { borderClassName, borderTopClassName, clsx } from '@univerjs/design';
import { CloseSingle, MoreSingle } from '@univerjs/icons';
import { IEditorBridgeService } from '@univerjs/sheets-ui';
import { RectPopup, useDependency, useEvent, useObservable } from '@univerjs/ui';
@@ -126,18 +127,16 @@ export function HelpFunction(props: IHelpFunctionProps) {
: (
<RectPopup key="show" portal onClickOutside={() => reset()} anchorRect$={position$} direction="vertical">
<div
className={`
className={clsx(`
univer-m-0 univer-box-border univer-w-[250px] univer-select-none univer-list-none
univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-leading-5 univer-shadow-md univer-outline-none
`}
univer-rounded-lg univer-bg-white univer-leading-5 univer-shadow-md univer-outline-none
`, borderClassName)}
>
<div
className={`
univer-box-border univer-flex univer-items-center univer-justify-between univer-border-x-0
univer-border-b univer-border-t-0 univer-border-solid univer-border-gray-200 univer-px-4
className={clsx(`
univer-box-border univer-flex univer-items-center univer-justify-between univer-px-4
univer-py-3 univer-text-xs univer-font-medium univer-text-gray-900 univer-wrap-anywhere
`}
`, borderTopClassName)}
>
<Help
prefix={functionInfo.functionName}
@@ -149,9 +148,9 @@ export function HelpFunction(props: IHelpFunctionProps) {
<div
className={`
univer-ml-2 univer-flex univer-h-6 univer-w-6 univer-cursor-pointer
univer-items-center univer-justify-center univer-rounded univer-border-0
univer-bg-transparent univer-p-0 univer-text-xs univer-text-gray-500
univer-outline-none univer-transition-colors
univer-items-center univer-justify-center univer-rounded univer-bg-transparent
univer-p-0 univer-text-xs univer-text-gray-500 univer-outline-none
univer-transition-colors
hover:univer-bg-gray-200
`}
style={{ transform: contentVisible ? 'rotateZ(-90deg)' : 'rotateZ(90deg)' }}
@@ -162,9 +161,9 @@ export function HelpFunction(props: IHelpFunctionProps) {
<div
className={`
univer-ml-2 univer-flex univer-h-6 univer-w-6 univer-cursor-pointer
univer-items-center univer-justify-center univer-rounded univer-border-0
univer-bg-transparent univer-p-0 univer-text-xs univer-text-gray-600
univer-outline-none univer-transition-colors
univer-items-center univer-justify-center univer-rounded univer-bg-transparent
univer-p-0 univer-text-xs univer-text-gray-600 univer-outline-none
univer-transition-colors
hover:univer-bg-gray-300
`}
onClick={onClose}
packages/sheets-formula-ui/src/views/formula-editor/search-function/SearchFunction.tsx
+6 -6
View File
@@ -17,7 +17,7 @@
import type { Editor } from '@univerjs/docs-ui';
import type { ISequenceNode } from '@univerjs/engine-formula';
import { CommandType, DisposableCollection, ICommandService } from '@univerjs/core';
import { clsx, scrollbarClassName } from '@univerjs/design';
import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { DeviceInputEventType } from '@univerjs/engine-render';
import { IShortcutService, KeyCode, RectPopup, useDependency } from '@univerjs/ui';
import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
@@ -190,17 +190,17 @@ function SearchFunctionFactory(props: ISearchFunctionProps, ref: any) {
return searchList.length > 0 && visible && (
<RectPopup portal anchorRect$={position$} direction="vertical">
<ul
className={clsx(`
univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none
univer-overflow-y-auto univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-2 univer-leading-5 univer-shadow-md univer-outline-none
`, scrollbarClassName)}
ref={(v) => {
ulRef.current = v!;
if (ref) {
ref.current = v!;
}
}}
className={clsx(`
univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none
univer-overflow-y-auto univer-rounded-lg univer-bg-white univer-p-2 univer-leading-5 univer-shadow-md
univer-outline-none
`, borderClassName, scrollbarClassName)}
>
{searchList.map((item, index) => (
<li
packages/sheets-formula-ui/src/views/more-functions/input-params/InputParams.tsx
+3 -2
View File
@@ -15,8 +15,9 @@
*/
import type { IFunctionInfo, IFunctionParam } from '@univerjs/engine-formula';
import React, { useState } from 'react';
import { borderLeftClassName, clsx } from '@univerjs/design';
import React, { useState } from 'react';
import { FunctionHelp } from '../function-help/FunctionHelp';
import { FunctionParams } from '../function-params/FunctionParams';
@@ -68,7 +69,7 @@ export function InputParams(props: IInputParamsProps) {
))}
</div>
<div className="univer-flex-1 univer-border-l univer-border-solid univer-border-gray-200 univer-p-3">
<div className={clsx('univer-flex-1 univer-p-3', borderLeftClassName)}>
<FunctionParams
title={activeIndex === -1
? <FunctionHelp prefix={functionInfo.functionName} value={functionParameter} />
packages/sheets-formula-ui/src/views/more-functions/select-function/SelectFunction.tsx
+11 -14
View File
@@ -18,7 +18,7 @@ import type { IFunctionInfo, IFunctionParam } from '@univerjs/engine-formula';
import type { ISearchItem } from '@univerjs/sheets-formula';
import type { ISidebarMethodOptions } from '@univerjs/ui';
import { LocaleService } from '@univerjs/core';
import { Input, Select } from '@univerjs/design';
import { borderClassName, clsx, Input, Select } from '@univerjs/design';
import { FunctionType } from '@univerjs/engine-formula';
import { CheckMarkSingle } from '@univerjs/icons';
import { IDescriptionService } from '@univerjs/sheets-formula';
@@ -161,26 +161,23 @@ export function SelectFunction(props: ISelectFunctionProps) {
</div>
<ul
className={`
className={clsx(`
univer-mx-0 univer-mb-0 univer-mt-2 univer-box-border univer-max-h-[364px] univer-w-full
univer-select-none univer-list-none univer-overflow-y-auto univer-rounded univer-border
univer-border-solid univer-border-gray-200 univer-p-3 univer-outline-none
`}
univer-select-none univer-list-none univer-overflow-y-auto univer-rounded univer-p-3
univer-outline-none
`, borderClassName)}
onKeyDown={handleSelectListKeyDown}
tabIndex={-1}
>
{selectList.map(({ name }, index) => (
<li
key={index}
className={active === index
? `
univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-bg-gray-200
univer-px-7 univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors
`
: `
univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7
univer-py-1 univer-text-smver-text-gray-900 univer-transition-colors
`}
className={clsx(`
univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1
univer-text-sm univer-text-gray-900 univer-transition-colors
`, {
'univer-bg-gray-200': active === index,
})}
onMouseEnter={() => handleLiMouseEnter(index)}
onMouseLeave={handleLiMouseLeave}
onClick={() => setCurrentFunctionInfo(index)}
packages/sheets-hyper-link-ui/src/views/CellLinkEdit/index.tsx
+4 -5
View File
@@ -34,7 +34,7 @@ import {
Tools,
UniverInstanceType,
} from '@univerjs/core';
import { Button, FormLayout, Input, Select } from '@univerjs/design';
import { borderClassName, Button, clsx, FormLayout, Input, Select } from '@univerjs/design';
import { DocSelectionManagerService } from '@univerjs/docs';
import { DocBackScrollRenderController, DocSelectionRenderService } from '@univerjs/docs-ui';
import { deserializeRangeWithSheet, IDefinedNamesService, serializeRange, serializeRangeToRefString, serializeRangeWithSheet } from '@univerjs/engine-formula';
@@ -433,10 +433,9 @@ export const CellLinkEdit = () => {
return (
<div
className={`
univer-box-border univer-w-[296px] univer-rounded-xl univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-p-4 univer-shadow-md
`}
className={clsx(`
univer-box-border univer-w-[296px] univer-rounded-xl univer-bg-white univer-p-4 univer-shadow-md
`, borderClassName)}
>
{showLabel
? (
packages/sheets-hyper-link-ui/src/views/CellLinkPopup/index.tsx
+5 -6
View File
@@ -17,7 +17,7 @@
import type { ICustomRange, Nullable, Workbook } from '@univerjs/core';
import type { IHyperLinkPopup } from '../../services/popup.service';
import { DOCS_ZEN_EDITOR_UNIT_ID_KEY, ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { clsx, MessageType, Tooltip } from '@univerjs/design';
import { borderClassName, clsx, MessageType, Tooltip } from '@univerjs/design';
import { AllBorderSingle, CopySingle, LinkSingle, UnlinkSingle, WriteSingle, Xlsx } from '@univerjs/icons';
import { CancelHyperLinkCommand, CancelRichHyperLinkCommand, SheetHyperLinkType, SheetsHyperLinkParserService } from '@univerjs/sheets-hyper-link';
import { IEditorBridgeService } from '@univerjs/sheets-ui';
@@ -66,11 +66,10 @@ export const CellLinkPopupPure = (props: ICellLinkPopupPureProps) => {
return (
<div
className={`
univer-mb-1 univer-flex univer-max-w-[328px] univer-flex-row univer-items-center univer-justify-between
univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-3 univer-shadow-md
`}
className={clsx(`
univer-mb-1 univer-flex univer-max-w-80 univer-flex-row univer-items-center univer-justify-between
univer-overflow-hidden univer-rounded-lg univer-bg-white univer-p-3 univer-shadow-md
`, borderClassName)}
onClick={() => popupService.hideCurrentPopup()}
>
<div
packages/sheets-note-ui/src/views/note.tsx
+5 -5
View File
@@ -19,7 +19,7 @@ import type { ISheetNote } from '@univerjs/sheets-note';
import type { IPopup } from '@univerjs/ui';
import type { IUniverSheetsNoteUIPluginConfig } from '../plugin';
import { ICommandService, LocaleService } from '@univerjs/core';
import { clsx, scrollbarClassName } from '@univerjs/design';
import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { SheetDeleteNoteCommand, SheetsNoteModel, SheetUpdateNoteCommand } from '@univerjs/sheets-note';
import { useConfigValue, useDebounceFn, useDependency } from '@univerjs/ui';
import { useEffect, useMemo, useRef, useState } from 'react';
@@ -119,11 +119,11 @@ export const SheetsNote = (props: { popup: IPopup<{ location: ISheetLocationBase
ref={textareaRef}
data-u-comp="note-textarea"
className={clsx(`
univer-resize-both univer-ml-px univer-rounded-md univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-2 univer-text-gray-900 univer-shadow
dark:univer-border-gray-600 dark:univer-bg-gray-800 dark:univer-text-white
univer-resize-both univer-ml-px univer-rounded-md univer-bg-white univer-p-2 univer-text-gray-900
univer-shadow
dark:univer-bg-gray-800 dark:univer-text-white
focus:univer-outline-none
`, scrollbarClassName)}
`, borderClassName, scrollbarClassName)}
style={{ width: note.width, height: note.height }}
value={note.note}
placeholder={localeService.t('note.placeholder')}
packages/sheets-numfmt-ui/src/views/components/CustomFormat.tsx
+2 -5
View File
@@ -16,7 +16,7 @@
import type { IBusinessComponentProps } from './interface';
import { ILocalStorageService, LocaleService } from '@univerjs/core';
import { Input } from '@univerjs/design';
import { borderClassName, clsx, Input } from '@univerjs/design';
import { CheckMarkSingle } from '@univerjs/icons';
import { CURRENCYFORMAT, DATEFMTLISG, NUMBERFORMAT } from '@univerjs/sheets-numfmt';
import { useDependency } from '@univerjs/ui';
@@ -79,10 +79,7 @@ export function CustomFormat(props: IBusinessComponentProps) {
className="univer-mt-2 univer-w-full"
/>
<div
className={`
univer-mt-2 univer-max-h-[400px] univer-overflow-auto univer-rounded-lg univer-border
univer-border-solid univer-border-gray-200 univer-p-2
`}
className={clsx('univer-mt-2 univer-max-h-[400px] univer-overflow-auto univer-rounded-lg univer-p-2', borderClassName)}
>
{options.map((p) => (
<div
packages/sheets-table-ui/src/views/components/SheetTableAnchor.tsx
+4 -5
View File
@@ -16,7 +16,7 @@
import type { IUniverSheetsTableUIConfig } from '../../controllers/config.schema';
import { cellToRange, ICommandService, IConfigService, Injector, IUniverInstanceService, LocaleService, Rectangle } from '@univerjs/core';
import { Dropdown, Input } from '@univerjs/design';
import { borderClassName, clsx, Dropdown, Input } from '@univerjs/design';
import { DeleteSingle, GridOutlineSingle, MoreDownSingle, PaintBucket, RenameSingle } from '@univerjs/icons';
import { getSheetCommandTarget, SheetRangeThemeModel, SheetsSelectionsService, WorkbookPermissionService } from '@univerjs/sheets';
import { DeleteSheetTableCommand, SetSheetTableCommand, TableManager } from '@univerjs/sheets-table';
@@ -138,11 +138,10 @@ export const SheetTableAnchor = () => {
return (
<div
key={item.tableId}
className={`
className={clsx(`
univer-absolute univer-box-border univer-flex univer-cursor-pointer univer-items-center
univer-rounded-xl univer-border univer-border-solid univer-border-gray-500 univer-pl-2
univer-pr-2 univer-shadow-xs
`}
univer-rounded-xl univer-pl-2 univer-pr-2 univer-shadow-xs
`, borderClassName)}
style={{
left: item.x,
top: Math.max(item.y, 0),
packages/sheets-table-ui/src/views/components/SheetTableConditionPanel.tsx
+6 -6
View File
@@ -17,7 +17,7 @@
import type { ITableFilterItem } from '@univerjs/sheets-table';
import type { IConditionCompareTypeEnum, IConditionExpect, IConditionInfo, ITableConditionTypeEnumWithoutLogic } from './type';
import { dayjs, Injector, LocaleService } from '@univerjs/core';
import { CascaderList, DatePicker, DateRangePicker, Dropdown, Input, InputNumber, Select } from '@univerjs/design';
import { borderClassName, CascaderList, clsx, DatePicker, DateRangePicker, Dropdown, Input, InputNumber, Select } from '@univerjs/design';
import { MoreDownSingle } from '@univerjs/icons';
import { TableConditionTypeEnum, TableDateCompareTypeEnum, TableStringCompareTypeEnum } from '@univerjs/sheets-table';
import { useDependency } from '@univerjs/ui';
@@ -106,14 +106,14 @@ export const SheetTableConditionPanel = (props: IConditionFilterProps) => {
)}
>
<div
className={`
className={clsx(`
univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between
univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-px-2 univer-text-sm univer-transition-colors univer-duration-200
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
univer-rounded-md univer-bg-white univer-px-2 univer-text-sm univer-transition-colors
univer-duration-200
dark:univer-bg-gray-700 dark:univer-text-white
focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2
hover:univer-border-primary-600
`}
`, borderClassName)}
>
<span>
{selectType}
packages/sheets-table-ui/src/views/components/SheetTableFilterPanel.tsx
+11 -15
View File
@@ -18,7 +18,7 @@ import type { ISortRangeCommandParams } from '@univerjs/sheets-sort';
import type { ITableConditionFilterItem, ITableManualFilterItem } from '@univerjs/sheets-table';
import type { IConditionInfo } from './type';
import { ICommandService, IPermissionService, LocaleService } from '@univerjs/core';
import { Button, Segmented } from '@univerjs/design';
import { borderClassName, Button, clsx, Segmented } from '@univerjs/design';
import { AscendingSingle, DescendingSingle } from '@univerjs/icons';
import { WorkbookEditablePermission } from '@univerjs/sheets';
import { SortRangeCommand, SortType } from '@univerjs/sheets-sort';
@@ -153,30 +153,26 @@ export function SheetTableFilterPanel() {
{editable && (
<div className="univer-mb-3 univer-flex">
<div
className={`
className={clsx(`
univer-flex univer-w-[140px] univer-flex-1 univer-cursor-default univer-items-center
univer-justify-center univer-gap-1 univer-rounded-l-md univer-border univer-border-solid
univer-border-gray-200 univer-py-1.5 univer-text-sm
univer-justify-center univer-gap-1 univer-rounded-l-md univer-py-1.5 univer-text-sm
hover:univer-cursor-pointer hover:univer-bg-gray-100
${isAsc
? 'univer-bg-gray-100'
: ''}
`}
`, borderClassName, {
'univer-bg-gray-100': isAsc,
})}
onClick={() => applySort(true)}
>
<AscendingSingle className="univer-text-base univer-text-color-[#1e222b] univer-mr-1" />
{localeService.t('sheets-sort.general.sort-asc')}
</div>
<div
className={`
className={clsx(`
univer-flex univer-w-[140px] univer-flex-1 univer-cursor-default univer-items-center
univer-justify-center univer-gap-1 univer-rounded-r-md univer-border univer-border-solid
univer-border-gray-200 univer-py-1.5 univer-text-sm
univer-justify-center univer-gap-1 univer-rounded-r-md univer-py-1.5 univer-text-sm
hover:univer-cursor-pointer hover:univer-bg-gray-100
${isDesc
? 'univer-bg-gray-100'
: ''}
`}
`, borderClassName, {
'univer-bg-gray-100': isDesc,
})}
onClick={() => applySort(false)}
>
<DescendingSingle className="univer-text-base univer-text-color-[#1e222b] univer-mr-1" />
packages/sheets-table-ui/src/views/components/SheetTableItemsFilterPanel.tsx
+4 -5
View File
@@ -16,7 +16,7 @@
import type { ITableFilterItem } from '@univerjs/sheets-table';
import { LocaleService } from '@univerjs/core';
import { Checkbox, clsx, Input, scrollbarClassName } from '@univerjs/design';
import { borderClassName, Checkbox, clsx, Input, scrollbarClassName } from '@univerjs/design';
import { useDependency } from '@univerjs/ui';
import React, { useCallback, useMemo, useState } from 'react';
import { SheetsTableUiService } from '../../services/sheets-table-ui-service';
@@ -118,11 +118,10 @@ export function SheetTableItemsFilterPanel(props: ISheetTableItemsFilterPanelPro
<div className="univer-flex univer-h-full univer-flex-col">
<Input autoFocus value={searchText} placeholder={localeService.t('sheets-filter.panel.search-placeholder')} onChange={onSearchValueChange} />
<div
className={`
className={clsx(`
univer-mt-2 univer-box-border univer-flex univer-h-[180px] univer-max-h-[180px] univer-flex-grow
univer-flex-col univer-overflow-hidden univer-rounded-md univer-border univer-border-solid
univer-border-gray-200 univer-py-1.5 univer-pl-2
`}
univer-flex-col univer-overflow-hidden univer-rounded-md univer-py-1.5 univer-pl-2
`, borderClassName)}
>
<div
className={clsx('univer-h-40 univer-overflow-y-auto univer-py-1 univer-pl-2', scrollbarClassName)}
packages/sheets-table-ui/src/views/components/SheetTableThemePanel.tsx
+37 -54
View File
@@ -17,7 +17,7 @@
import type { IRangeThemeStyleItem, ISetRangeThemeMutationParams } from '@univerjs/sheets';
import type { IAddTableThemeCommandParams, ISetSheetTableCommandParams, ITableSetConfig } from '@univerjs/sheets-table';
import { ColorKit, ErrorService, ICommandService, LocaleService } from '@univerjs/core';
import { ColorPicker, Dropdown } from '@univerjs/design';
import { borderClassName, clsx, ColorPicker, Dropdown } from '@univerjs/design';
import { DropdownSingle } from '@univerjs/icons';
import { RangeThemeStyle, SetRangeThemeMutation, SheetRangeThemeModel } from '@univerjs/sheets';
import { AddTableThemeCommand, customEmptyThemeWithBorderStyle, processStyleWithBorderStyle, RemoveTableThemeCommand, SetSheetTableCommand, TableManager } from '@univerjs/sheets-table';
@@ -156,13 +156,12 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
</div>
<h5>{localeService.t('sheets-table.customStyle')}</h5>
<div className="univer-w-full univer-rounded-sm univer-border univer-border-solid univer-border-gray-200">
<div className={clsx('univer-w-full univer-rounded-sm', borderClassName)}>
<div className="univer-flex univer-flex-wrap univer-gap-2 univer-p-2">
<div
className={`
univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid
univer-border-gray-200 univer-p-px univer-text-center univer-leading-10
`}
className={clsx(`
univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10
`, borderClassName)}
onClick={handleAddCustomTheme}
>
+
@@ -215,10 +214,10 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
<div className="univer-flex univer-flex-col univer-gap-2 univer-p-2">
<div className="univer-flex univer-h-9 univer-gap-2">
<div
className={`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-border
univer-border-solid univer-border-gray-200 univer-text-center univer-leading-9
`}
className={clsx(`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
univer-leading-9
`, borderClassName)}
style={{
background: headerBg,
color: new ColorKit(headerBg).isDark() ? '#fff' : '#000',
@@ -247,17 +246,13 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
)}
>
<div
className={`
className={clsx(`
univer-flex univer-cursor-pointer univer-items-center univer-gap-2
univer-rounded-sm univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-1
`}
univer-rounded-sm univer-bg-white univer-p-1
`, borderClassName)}
>
<div
className={`
univer-h-4 univer-w-4 univer-rounded-[8px] univer-border
univer-border-solid univer-border-gray-200 univer-bg-slate-400
`}
className={clsx('univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400', borderClassName)}
style={{
background: headerBg,
color: new ColorKit(headerBg).isDark() ? '#fff' : '#000',
@@ -269,10 +264,10 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
</div>
<div className="univer-flex univer-h-9 univer-gap-2">
<div
className={`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-border
univer-border-solid univer-border-gray-200 univer-text-center univer-leading-9
`}
className={clsx(`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
univer-leading-9
`, borderClassName)}
style={{
background: firstRowBg,
color: new ColorKit(firstRowBg).isDark() ? '#fff' : '#000',
@@ -302,17 +297,13 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
)}
>
<div
className={`
className={clsx(`
univer-flex univer-cursor-pointer univer-items-center univer-gap-2
univer-rounded-sm univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-1
`}
univer-rounded-sm univer-bg-white univer-p-1
`, borderClassName)}
>
<div
className={`
univer-h-4 univer-w-4 univer-rounded-[8px] univer-border
univer-border-solid univer-border-gray-200 univer-bg-slate-400
`}
className={clsx('univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400', borderClassName)}
style={{ background: firstRowBg }}
/>
<DropdownSingle className="univer-h-2 univer-w-2" />
@@ -321,10 +312,10 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
</div>
<div className="univer-flex univer-h-9 univer-gap-2">
<div
className={`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-border
univer-border-solid univer-border-gray-200 univer-text-center univer-leading-9
`}
className={clsx(`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
univer-leading-9
`, borderClassName)}
style={{
background: secondRowBg,
color: new ColorKit(secondRowBg).isDark() ? '#fff' : '#000',
@@ -352,17 +343,13 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
)}
>
<div
className={`
className={clsx(`
univer-flex univer-cursor-pointer univer-items-center univer-gap-2
univer-rounded-sm univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-1
`}
univer-rounded-sm univer-bg-white univer-p-1
`)}
>
<div
className={`
univer-h-4 univer-w-4 univer-rounded-[8px] univer-border
univer-border-solid univer-border-gray-200 univer-bg-slate-400
`}
className={clsx('univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400', borderClassName)}
style={{ background: secondRowBg }}
/>
<DropdownSingle className="univer-h-2 univer-w-2" />
@@ -371,10 +358,10 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
</div>
<div className="univer-flex univer-h-9 univer-gap-2">
<div
className={`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-border
univer-border-solid univer-border-gray-200 univer-text-center univer-leading-9
`}
className={clsx(`
univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
univer-leading-9
`, borderClassName)}
style={{
background: lastRowBg,
color: new ColorKit(lastRowBg).isDark() ? '#fff' : '#000',
@@ -403,17 +390,13 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
)}
>
<div
className={`
className={clsx(`
univer-flex univer-cursor-pointer univer-items-center univer-gap-2
univer-rounded-sm univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-1
`}
univer-rounded-sm univer-bg-white univer-p-1
`, borderClassName)}
>
<div
className={`
univer-h-4 univer-w-4 univer-rounded-[8px] univer-border
univer-border-solid univer-border-gray-200 univer-bg-slate-400
`}
className={clsx('univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400', borderClassName)}
style={{ background: lastRowBg }}
/>
<DropdownSingle className="univer-h-2 univer-w-2" />
packages/sheets-ui/src/components/border-panel/BorderPanel.tsx
+11 -2
View File
@@ -92,16 +92,22 @@ export function BorderPanel(props: IBorderPanelProps) {
return (
<section className="univer-box-border univer-grid univer-gap-2 univer-p-1.5">
<div className="univer-box-border univer-grid univer-grid-cols-5 univer-gap-2">
<div
className={`
univer-box-border univer-grid univer-grid-cols-5 univer-gap-2 univer-text-gray-600
dark:univer-text-gray-400
`}
>
{BORDER_LINE_CHILDREN.map((item) => (
<a
key={item.value}
className={clsx(`
univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center
univer-justify-self-center univer-rounded
dark:hover:univer-bg-gray-700
hover:univer-bg-gray-100
`, {
'univer-bg-gray-200': borderStyleManagerService.getBorderInfo().type === item.value,
'univer-bg-gray-200 dark:univer-bg-gray-600': borderStyleManagerService.getBorderInfo().type === item.value,
})}
onClick={(e) => {
e.stopPropagation();
@@ -128,6 +134,7 @@ export function BorderPanel(props: IBorderPanelProps) {
className={`
univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded
univer-border-none univer-bg-transparent univer-p-1
dark:hover:univer-bg-gray-700
hover:univer-bg-gray-100
`}
type="button"
@@ -149,6 +156,7 @@ export function BorderPanel(props: IBorderPanelProps) {
className={`
univer-flex univer-cursor-pointer univer-items-center
univer-justify-center univer-rounded univer-px-1 univer-py-2
dark:hover:univer-bg-gray-700
hover:univer-bg-gray-100
`}
onClick={() => handleClick(item.value, 'style')}
@@ -164,6 +172,7 @@ export function BorderPanel(props: IBorderPanelProps) {
className={`
univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded
univer-border-none univer-bg-transparent univer-p-1
dark:hover:univer-bg-gray-700
hover:univer-bg-gray-100
`}
type="button"
packages/sheets-ui/src/components/border-panel/border-line/BorderLine.tsx
-1
View File
@@ -15,7 +15,6 @@
*/
import { BorderStyleTypes } from '@univerjs/core';
import React from 'react';
import { BorderDashDot } from './icons/BorderDashDot';
import { BorderDashDotDot } from './icons/BorderDashDotDot';
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderDashDot.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderDashDot = () => (
<svg width="120" height="2" viewBox="0 0 120 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.98999 1.08218H-0.0100098V0.0821838H0.98999V1.08218Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderDashDotDot.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderDashDotDot = () => (
<svg width="120" height="2" viewBox="0 0 120 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.0100098 1.15771H0.98999V0.157715H-0.0100098V1.15771Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderDashed.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderDashed = () => (
<svg width="120" height="2" viewBox="0 0 120 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.00842285 1.22449H2.99158V0.224487H-0.00842285V1.22449Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderDotted.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderDotted = () => (
<svg width="120" height="2" viewBox="0 0 120 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.491699 1.69537H1.4917V0.695374H0.491699V1.69537Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderHair.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderHair = () => (
<svg width="120" height="2" viewBox="0 0 120 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.00976562 1.65707H0.990234V0.657074H-0.00976562V1.65707Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderMedium.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderMedium = () => (
<svg width="120" height="3" viewBox="0 0 120 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderMediumDashDot.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderMediumDashDot = () => (
<svg width="120" height="3" viewBox="0 0 120 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.0100098 2.47614H1.98999V0.476135H-0.0100098V2.47614Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderMediumDashDotDot.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderMediumDashDotDot = () => (
<svg width="120" height="2" viewBox="0 0 120 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.0100098 2.00415H1.98999V0.00415039H-0.0100098V2.00415Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderMediumDashed.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderMediumDashed = () => (
<svg width="118" height="3" viewBox="0 0 118 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.00854492 2.94815H1.99146V0.948151H-0.00854492V2.94815Z" fill="black" />
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderThick.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderThick = () => (
<svg width="120" height="4" viewBox="0 0 120 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
packages/sheets-ui/src/components/border-panel/border-line/icons/BorderThin.tsx
-2
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
export const BorderThin = () => (
<svg width="120" height="2" viewBox="0 0 120 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
packages/sheets-ui/src/views/auto-fill-popup-menu/AutoFillPopupMenu.tsx
+3 -4
View File
@@ -16,7 +16,7 @@
import type { ICommandInfo, IExecutionOptions } from '@univerjs/core';
import { ICommandService, IUniverInstanceService, LocaleService, toDisposable } from '@univerjs/core';
import { clsx, DropdownMenu } from '@univerjs/design';
import { borderClassName, clsx, DropdownMenu } from '@univerjs/design';
import { convertTransformToOffsetX, convertTransformToOffsetY, IRenderManagerService } from '@univerjs/engine-render';
import { Autofill, MoreDownSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
@@ -200,10 +200,9 @@ export const AutoFillPopupMenu: React.FC<{}> = () => {
>
<div
className={clsx(`
univer-flex univer-items-center univer-gap-2 univer-rounded univer-border univer-border-solid
univer-border-gray-200 univer-p-1
univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1
hover:univer-bg-gray-100
`, {
`, borderClassName, {
'univer-bg-gray-100': visible,
'univer-bg-white': !visible,
})}
packages/sheets-ui/src/views/clipboard/ClipboardPopupMenu.tsx
+5 -9
View File
@@ -17,7 +17,7 @@
import type { IDiscreteRange } from '../../controllers/utils/range-tools';
import type { IPasteHookKeyType } from '../../services/clipboard/type';
import { ICommandService, IUniverInstanceService, LocaleService } from '@univerjs/core';
import { Dropdown } from '@univerjs/design';
import { borderClassName, clsx, Dropdown } from '@univerjs/design';
import { convertTransformToOffsetX, convertTransformToOffsetY, IRenderManagerService } from '@univerjs/engine-render';
import { CheckMarkSingle, MoreDownSingle, PasteSpecial } from '@univerjs/icons';
import { useDependency, useObservable } from '@univerjs/ui';
@@ -136,13 +136,11 @@ export const ClipboardPopupMenu = () => {
return (
<div
className={`
className={clsx(`
univer-absolute univer-z-[1080] univer-flex univer-cursor-pointer univer-items-center
univer-justify-center univer-gap-2 univer-rounded univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-p-1
dark:univer-border-gray-700
univer-justify-center univer-gap-2 univer-rounded univer-bg-white univer-p-1
hover:univer-bg-gray-100
`}
`, borderClassName)}
style={{
left: relativePosition.positionX + DEFAULT_PADDING,
top: relativePosition.positionY + DEFAULT_PADDING,
@@ -163,14 +161,13 @@ export const ClipboardPopupMenu = () => {
className={`
univer-cursor-pointer univer-rounded univer-px-2 univer-py-1.5
univer-transition-colors
dark:univer-border-gray-700
hover:univer-bg-gray-100
`}
onClick={() => handleClick(item.value)}
>
<span>
{selected && (
<CheckMarkSingle className="univer-absolute" style={{ color: 'rgb(var(--green-700, #409f11))' }} />
<CheckMarkSingle className="univer-absolute univer-text-primary-600" />
)}
</span>
<div
@@ -193,7 +190,6 @@ export const ClipboardPopupMenu = () => {
className={`
univer-flex univer-cursor-pointer univer-content-center univer-items-center univer-rounded
univer-py-1
dark:univer-border-gray-700
`}
onClick={() => {
setMenuVisible(!menuVisible);
packages/sheets-ui/src/views/defined-name/DefinedName.tsx
+4 -4
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { clsx, Dropdown } from '@univerjs/design';
import { borderRightClassName, clsx, Dropdown } from '@univerjs/design';
import { IDefinedNamesService } from '@univerjs/engine-formula';
import { MoreDownSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
@@ -50,11 +50,11 @@ export function DefinedName({ disable }: { disable: boolean }) {
>
<input
className={clsx(`
univer-box-border univer-h-full univer-w-full univer-appearance-none univer-border-0 univer-border-r
univer-border-solid univer-border-r-gray-200 univer-px-1.5 univer-text-gray-900
univer-box-border univer-h-full univer-w-full univer-appearance-none univer-px-1.5
univer-text-gray-900
dark:univer-border-r-gray-700 dark:univer-bg-gray-900 dark:univer-text-white
focus:univer-outline-none
`, {
`, borderRightClassName, {
'univer-cursor-not-allowed': disable,
})}
type="text"
packages/sheets-ui/src/views/defined-name/DefinedNameContainer.tsx
+38 -22
View File
@@ -18,7 +18,7 @@ import type { Nullable, Workbook } from '@univerjs/core';
import type { IDefinedNamesServiceParam, ISetDefinedNameMutationParam } from '@univerjs/engine-formula';
import { ICommandService, IUniverInstanceService, LocaleService, Tools, UniverInstanceType } from '@univerjs/core';
import { clsx, Confirm, Tooltip } from '@univerjs/design';
import { Button, clsx, Confirm, Tooltip } from '@univerjs/design';
import { IDefinedNamesService, serializeRangeWithSheet } from '@univerjs/engine-formula';
import { CheckMarkSingle, DeleteSingle, IncreaseSingle } from '@univerjs/icons';
import {
@@ -175,37 +175,52 @@ export const DefinedNameContainer = () => {
};
return (
<div className="univer-relative univer-w-full">
<div className="univer-absolute univer-w-full univer-overflow-hidden univer-overflow-y-auto">
<div key="insertDefinedName">
<div
onClick={openInsertCloseKeyEditor}
<div
data-u-comp="defined-name-container"
className="univer-relative univer-box-border univer-w-full"
>
<div className="univer-w-full univer-overflow-hidden univer-overflow-y-auto">
<div key="insertDefinedName" className="univer-mb-4">
<Button
className={clsx(
`
univer-flex univer-h-10 univer-w-full univer-items-center univer-justify-center
univer-border-0 univer-border-b univer-border-t univer-border-solid univer-border-gray-200
univer-text-base univer-text-primary univer-cursor-pointer
hover:univer-bg-gray-50
`,
{ 'univer-hidden': editState }
'univer-w-full',
{
'univer-hidden': editState,
}
)}
onClick={openInsertCloseKeyEditor}
>
<IncreaseSingle />
<span className="univer-ml-1">{localeService.t('definedName.addButton')}</span>
</div>
{editState && <DefinedNameInput confirm={insertConfirm} cancel={closeInput} state={editState} inputId="insertDefinedName" name={getInsertDefinedName()} formulaOrRefString={getInertFormulaOrRefString()} />}
</Button>
{editState && (
<DefinedNameInput
confirm={insertConfirm}
cancel={closeInput}
state={editState}
inputId="insertDefinedName"
name={getInsertDefinedName()}
formulaOrRefString={getInertFormulaOrRefString()}
/>
)}
</div>
{definedNames.map((definedName, index) => {
return (
<div key={index}>
<div
key={index}
className={`
univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200
dark:univer-divide-gray-600
`}
>
<div
onClick={() => { focusDefinedName(definedName); }}
className={clsx(
'univer-relative univer-flex univer-items-center univer-justify-between univer-p-2',
'univer-border-0 univer-border-b univer-border-solid univer-border-gray-200',
`
univer-cursor-default univer-select-none
univer-relative univer-flex univer-cursor-default univer-select-none
univer-items-center univer-justify-between univer-rounded-md univer-p-2
dark:hover:univer-bg-gray-700
hover:univer-bg-gray-50
`,
{ 'univer-hidden': definedName.id === editorKey }
@@ -216,6 +231,7 @@ export const DefinedNameContainer = () => {
className={`
univer-my-1 univer-max-h-[100px] univer-max-w-[190px] univer-overflow-hidden
univer-text-sm univer-font-medium univer-text-gray-900
dark:univer-text-white
`}
>
{definedName.name}
@@ -227,8 +243,8 @@ export const DefinedNameContainer = () => {
</div>
<div
className={`
univer-m-[5px_0] univer-max-h-[100px] univer-overflow-hidden
univer-text-ellipsis univer-text-xs univer-text-gray-500
univer-my-1 univer-max-h-[100px] univer-overflow-hidden univer-text-ellipsis
univer-text-xs univer-text-gray-500
`}
>
{definedName.formulaOrRefString}
@@ -238,7 +254,7 @@ export const DefinedNameContainer = () => {
<div
className={`
univer-absolute univer-text-xs univer-text-primary univer-right-[60px]
univer-top-5 univer-hidden univer-translate-y-[-50%] univer-cursor-pointer
univer-top-5 univer-hidden -univer-translate-y-1/2 univer-cursor-pointer
univer-rounded univer-p-1
group-hover:univer-block
hover:univer-bg-hyacinth-50
packages/sheets-ui/src/views/defined-name/DefinedNameInput.tsx
+6 -11
View File
@@ -18,7 +18,7 @@ import type { Nullable, Workbook } from '@univerjs/core';
import type { IDefinedNamesServiceParam } from '@univerjs/engine-formula';
import type { IRangeSelectorProps } from '../../basics/editor/range';
import { AbsoluteRefType, IUniverInstanceService, LocaleService, Tools, UniverInstanceType } from '@univerjs/core';
import { Button, clsx, Input, Radio, RadioGroup, Select } from '@univerjs/design';
import { borderBottomClassName, borderClassName, Button, clsx, Input, Radio, RadioGroup, Select } from '@univerjs/design';
import { IDefinedNamesService, IFunctionService, isReferenceStrings, isReferenceStringWithEffectiveColumn, LexerTreeBuilder, operatorToken } from '@univerjs/engine-formula';
import { hasCJKText } from '@univerjs/engine-render';
import { ErrorSingle } from '@univerjs/icons';
@@ -206,11 +206,7 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
return (
<div
className={clsx(`
univer-flex univer-flex-col univer-items-center univer-border-0 univer-border-b univer-border-solid
univer-border-gray-200 univer-pb-1
[&>div]:univer-mt-4 [&>div]:univer-w-full
`, {
className={clsx('univer-grid univer-space-y-2 univer-pb-1', borderBottomClassName, {
'univer-hidden': !state,
})}
>
@@ -251,15 +247,14 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
<div className="univer-relative univer-h-8 univer-select-none">
<FormulaEditor
ref={formulaEditorRef}
className={`
className={clsx(`
univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center
univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-pt-2 univer-transition-colors
univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors
[&>div:first-child]:univer-px-2.5
[&>div]:univer-h-5 [&>div]:univer-ring-transparent
dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white
dark:univer-bg-gray-700 dark:univer-text-white
hover:univer-border-primary-600
`}
`, borderClassName)}
initValue={formulaOrRefStringValue as any}
unitId={unitId}
subUnitId={subUnitId}
packages/sheets-ui/src/views/defined-name/DefinedNameOverlay.tsx
+4 -5
View File
@@ -18,7 +18,7 @@ import type { Workbook } from '@univerjs/core';
import type { IDefinedNamesServiceParam } from '@univerjs/engine-formula';
import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { clsx, scrollbarClassName } from '@univerjs/design';
import { borderBottomClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { IDefinedNamesService } from '@univerjs/engine-formula';
import { SetWorksheetShowCommand } from '@univerjs/sheets';
import { ISidebarService, useDependency } from '@univerjs/ui';
@@ -109,10 +109,9 @@ export function DefinedNameOverlay() {
onClick={() => { focusDefinedName(definedName); }}
>
<div
className={`
univer-flex univer-items-center univer-justify-between univer-gap-2 univer-border-0
univer-border-b univer-border-solid univer-border-gray-200 univer-py-1
`}
className={clsx(`
univer-flex univer-items-center univer-justify-between univer-gap-2 univer-py-1
`, borderBottomClassName)}
>
<div
className={`
packages/sheets-ui/src/views/dropdown/date-dropdown/index.tsx
+2 -6
View File
@@ -17,7 +17,7 @@
import type { IPopup } from '@univerjs/ui';
import type { IBaseDropdownProps } from '../type';
import { dayjs, LocaleService, numfmt } from '@univerjs/core';
import { Button, DatePanel } from '@univerjs/design';
import { borderTopClassName, Button, clsx, DatePanel } from '@univerjs/design';
import { useDependency } from '@univerjs/ui';
import { useMemo, useState } from 'react';
@@ -66,11 +66,7 @@ export function DateDropdown(props: { popup: IPopup<IDateDropdownProps & IBaseDr
disabledDate={(current) => !numfmt.parseDate(current.format('YYYY-MM-DD'))}
/>
<div
className={`
univer-flex univer-justify-end univer-border-0 univer-border-t univer-border-solid
univer-border-t-gray-200 univer-pt-2
dark:univer-border-t-gray-700
`}
className={clsx('univer-flex univer-justify-end univer-pt-2', borderTopClassName)}
>
<Button size="small" variant="primary" onClick={handleSave} disabled={!date || !date.isValid()}>
{localeService.t('dataValidation.alert.ok')}
packages/sheets-ui/src/views/dropdown/list-dropdown/index.tsx
+6 -7
View File
@@ -20,7 +20,7 @@ import type { ISheetLocation } from '@univerjs/sheets';
import type { IPopup } from '@univerjs/ui';
import type { IBaseDropdownProps } from '../type';
import { BuildTextUtils, ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { clsx, scrollbarClassName } from '@univerjs/design';
import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { RichTextEditingMutation } from '@univerjs/docs';
import { CheckMarkSingle } from '@univerjs/icons';
import { RangeProtectionPermissionEditPoint, SheetPermissionCheckController, WorkbookEditablePermission, WorksheetEditPermission } from '@univerjs/sheets';
@@ -69,12 +69,11 @@ const SelectList = (props: ISelectListProps) => {
return (
<div
data-u-comp="select-list"
className={`
univer-box-border univer-rounded-lg univer-border univer-border-solid univer-border-gray-200
univer-bg-white univer-pb-1 univer-text-gray-900 univer-shadow
dark:univer-border-gray-700 dark:univer-bg-black dark:univer-text-white
`}
data-u-comp="sheets-dropdown-list"
className={clsx(`
univer-box-border univer-rounded-lg univer-bg-white univer-pb-1 univer-text-gray-900 univer-shadow
dark:univer-bg-black dark:univer-text-white
`, borderClassName)}
style={style}
>
<div
packages/sheets-ui/src/views/editor-container/EditorContainer.tsx
+5 -4
View File
@@ -16,12 +16,13 @@
import type { KeyCode } from '@univerjs/ui';
import { DOCS_NORMAL_EDITOR_UNIT_ID_KEY, ICommandService, IContextService } from '@univerjs/core';
import { borderClassName, clsx } from '@univerjs/design';
import { IEditorService } from '@univerjs/docs-ui';
import { DeviceInputEventType } from '@univerjs/engine-render';
import { ComponentManager, DISABLE_AUTO_FOCUS_KEY, MetaKeys, useDependency, useEvent, useObservable, useSidebarClick } from '@univerjs/ui';
import React, { useEffect, useRef, useState } from 'react';
import { SetCellEditVisibleArrowOperation, SetCellEditVisibleOperation } from '../../commands/operations/cell-edit.operation';
import { SetCellEditVisibleArrowOperation, SetCellEditVisibleOperation } from '../../commands/operations/cell-edit.operation';
import { EMBEDDING_FORMULA_EDITOR_COMPONENT_KEY } from '../../common/keys';
import { IEditorBridgeService } from '../../services/editor-bridge.service';
import { ICellEditorManagerService } from '../../services/editor/cell-editor-manager.service';
@@ -137,11 +138,11 @@ export const EditorContainer: React.FC<ICellIEditorProps> = () => {
return (
<div
className={`
className={clsx(`
univer-absolute univer-left-[100px] univer-top-[200px] univer-z-10 univer-flex univer-h-[50px]
univer-w-[100px] univer-border univer-border-solid univer-border-gray-100
univer-w-[100px]
dark:univer-bg-gray-700
`}
`, borderClassName)}
style={{
left: state.left,
top: state.top,
packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx
+7 -11
View File
@@ -17,7 +17,7 @@
import type { Workbook } from '@univerjs/core';
import type { IEditorBridgeServiceVisibleParam } from '../../services/editor-bridge.service';
import { DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, FOCUSING_FX_BAR_EDITOR, ICommandService, IContextService, IPermissionService, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
import { clsx } from '@univerjs/design';
import { borderBottomClassName, borderRightClassName, clsx } from '@univerjs/design';
import { IEditorService } from '@univerjs/docs-ui';
import { DeviceInputEventType } from '@univerjs/engine-render';
import { CheckMarkSingle, CloseSingle, DropdownSingle, FxSingle } from '@univerjs/icons';
@@ -255,11 +255,9 @@ export function FormulaBar(props: IProps) {
<div
data-u-comp="formula-bar"
className={clsx(`
univer-box-border univer-flex univer-h-7 univer-border-0 univer-border-b univer-border-solid
univer-bg-white univer-border-bg-gray-200 univer-border-b-gray-200 univer-transition-[height]
univer-ease-linear
dark:univer-border-b-gray-700 dark:univer-bg-gray-900
`, className)}
univer-box-border univer-flex univer-h-7 univer-bg-white univer-transition-[height] univer-ease-linear
dark:univer-bg-gray-900
`, borderBottomClassName, className)}
style={{
height: ArrowDirection.Down === arrowDirection ? '28px' : '82px',
pointerEvents: editDisable ? 'none' : 'auto',
@@ -272,12 +270,10 @@ export function FormulaBar(props: IProps) {
<div className="univer-flex univer-h-full univer-w-full">
<div className={clsx('univer-py-1.5', { 'univer-cursor-not-allowed univer-text-gray-200': disabled })}>
<div
className={`
className={clsx(`
univer-relative univer-box-border univer-flex univer-h-full univer-w-20 univer-items-center
univer-justify-center univer-border-0 univer-border-r univer-border-solid
univer-border-r-gray-200 univer-text-xs
dark:univer-border-r-gray-700
`}
univer-justify-center univer-text-xs
`, borderRightClassName)}
>
{/* TODO: use buttons to replace these re-implementation of buttons. */}
<span
packages/sheets-ui/src/views/mobile/sheet-bar/MobileSheetBar.tsx
+11 -12
View File
@@ -18,7 +18,7 @@ import type { ICommandInfo, Workbook } from '@univerjs/core';
import type { ISetWorksheetActiveOperationParams } from '@univerjs/sheets';
import type { IBaseSheetBarProps } from '../../sheet-bar/sheet-bar-tabs/SheetBarItem';
import { ICommandService } from '@univerjs/core';
import { clsx } from '@univerjs/design';
import { borderRightClassName, clsx } from '@univerjs/design';
import {
InsertSheetMutation,
RemoveSheetMutation,
@@ -108,31 +108,30 @@ function MobileSheetBarImpl(props: { workbook: Workbook }) {
return (
<div
className={`
univer-w-full univer-overflow-x-scroll univer-h-8 univer-bg-gray-100
univer-h-8 univer-w-full univer-overflow-x-scroll univer-bg-gray-100
dark:univer-bg-gray-900
`}
>
<div className="univer-flex univer-flex-nowrap univer-items-center univer-h-8">
<div className="univer-flex univer-h-8 univer-flex-nowrap univer-items-center">
{sheetList.map((sheet) => (
<div
ref={(element) => {
tabMapRef.current.set(sheet.sheetId!, element);
}}
className={clsx(
`
univer-items-center univer-box-border univer-shrink-0 univer-flex-nowrap univer-text-xs
univer-h-full univer-min-w-12 univer-overflow-hidden univer-py-0.5 univer-px-1
univer-text-center univer-whitespace-nowrap univer-border-0 univer-border-r
univer-border-solid univer-border-r-gray-200 univer-truncate univer-max-w-[120px]
univer-box-border univer-h-full univer-min-w-12 univer-max-w-[120px] univer-shrink-0
univer-flex-nowrap univer-items-center univer-overflow-hidden univer-truncate
univer-whitespace-nowrap univer-px-1 univer-py-0.5 univer-text-center univer-text-xs
univer-leading-7
dark:univer-border-r-gray-700
`,
borderRightClassName,
{
'univer-text-primary-600 univer-bg-white dark:univer-bg-slate-600': sheet.sheetId === activeKey,
'univer-bg-white univer-text-primary-600 dark:univer-bg-slate-600': sheet.sheetId === activeKey,
}
)}
key={sheet.sheetId}
onClick={() => onTabClick(sheet.sheetId!)}
ref={(element) => {
tabMapRef.current.set(sheet.sheetId!, element);
}}
>
{sheet.label}
</div>
packages/sheets-ui/src/views/permission/panel-detail/PermissionDetailUserPart.tsx
+4 -5
View File
@@ -17,7 +17,7 @@
import type { Workbook } from '@univerjs/core';
import type { ICollaborator } from '@univerjs/protocol';
import { IAuthzIoService, IUniverInstanceService, LocaleService, UniverInstanceType, UserManagerService } from '@univerjs/core';
import { Avatar, FormLayout, Radio, RadioGroup, Select } from '@univerjs/design';
import { Avatar, borderClassName, clsx, FormLayout, Radio, RadioGroup, Select } from '@univerjs/design';
import { UnitRole } from '@univerjs/protocol';
import { EditStateEnum, ViewStateEnum } from '@univerjs/sheets';
import { IDialogService, useDependency, useObservable } from '@univerjs/ui';
@@ -112,10 +112,9 @@ export const PermissionDetailUserPart = (props: IPermissionDetailUserPartProps)
</FormLayout>
{editState === EditStateEnum.DesignedUserCanEdit && (
<div
className={`
univer-mb-2 univer-flex univer-h-[270px] univer-flex-col univer-rounded-lg univer-border
univer-border-solid univer-border-gray-200 univer-p-3
`}
className={clsx(`
univer-mb-2 univer-flex univer-h-[270px] univer-flex-col univer-rounded-lg univer-p-3
`, borderClassName)}
>
<div className="univer-flex univer-items-center univer-justify-between">
<span>{localeService.t('permission.panel.designedPerson')}</span>
packages/sheets-ui/src/views/permission/panel-list/index.tsx
+4 -5
View File
@@ -19,7 +19,7 @@ import type { IPermissionPoint } from '@univerjs/protocol';
import type { IRangeProtectionRule, IWorksheetProtectionRule } from '@univerjs/sheets';
import type { IPermissionPanelRule } from '../../../services/permission/sheet-permission-panel.model';
import { IAuthzIoService, ICommandService, IPermissionService, IUniverInstanceService, LocaleService, Tools, UniverInstanceType, UserManagerService } from '@univerjs/core';
import { Avatar, Button, clsx, Tooltip } from '@univerjs/design';
import { Avatar, borderClassName, Button, clsx, Tooltip } from '@univerjs/design';
import { serializeRange } from '@univerjs/engine-formula';
import { DeleteSingle, WriteSingle } from '@univerjs/icons';
import { UnitAction, UnitObject } from '@univerjs/protocol';
@@ -262,11 +262,10 @@ export const SheetPermissionPanelList = () => {
return (
<div
key={item.objectID}
className={`
univer-mt-3 univer-rounded-lg univer-border univer-border-solid
univer-border-gray-200 univer-p-3
className={clsx(`
univer-mt-3 univer-rounded-lg univer-p-3
hover:univer-bg-gray-50
`}
`, borderClassName)}
onMouseMove={() => {
const { subUnitId, unitType } = rule;
const activeSheet = workbook.getActiveSheet();
packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarItem.tsx
+2 -2
View File
@@ -62,8 +62,8 @@ export function SheetBarItem(props: IBaseSheetBarProps) {
`, currentSelected
? `
univer-flex univer-justify-center univer-bg-white univer-font-bold univer-text-primary-700
univer-shadow-sm univer-transition-[box-shadow]
dark:univer-bg-black
univer-shadow-sm univer-transition-shadow
dark:univer-bg-gray-900
`
: `
univer-font-medium
packages/slides-ui/src/components/image-popup-menu/ImagePopupMenu.tsx
+6 -8
View File
@@ -16,7 +16,7 @@
import type { IDrawingSearch } from '@univerjs/core';
import { ICommandService, LocaleService } from '@univerjs/core';
import { clsx, Dropdown } from '@univerjs/design';
import { borderClassName, clsx, Dropdown } from '@univerjs/design';
import { Autofill, MoreDownSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
import { useState } from 'react';
@@ -82,11 +82,10 @@ export function SlideImagePopupMenu(props: IImagePopupMenuProps) {
align="start"
overlay={(
<ul
className={`
className={clsx(`
univer-m-0 univer-box-border univer-grid univer-list-none univer-items-center univer-gap-1
univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-p-1.5 univer-text-sm univer-shadow-lg
`}
univer-rounded-lg univer-bg-white univer-p-1.5 univer-text-sm univer-shadow-lg
`, borderClassName)}
>
{availableMenu.map((item) => (
<li
@@ -110,9 +109,8 @@ export function SlideImagePopupMenu(props: IImagePopupMenuProps) {
>
<div
className={clsx(`
univer-flex univer-items-center univer-justify-center univer-rounded univer-border
univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1
`, {
univer-flex univer-items-center univer-justify-center univer-rounded univer-bg-white univer-p-1
`, borderClassName, {
'univer-bg-gray-100': visible,
})}
>
packages/slides-ui/src/components/panels/FillPanel.tsx
+2 -5
View File
@@ -18,7 +18,7 @@ import type { Nullable } from '@univerjs/core';
import type { Rect } from '@univerjs/engine-render';
import { ICommandService, LocaleService } from '@univerjs/core';
import { ColorPicker, Dropdown } from '@univerjs/design';
import { borderTopClassName, clsx, ColorPicker, Dropdown } from '@univerjs/design';
import { MoreDownSingle, PaintBucket } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
@@ -81,10 +81,7 @@ export default function ArrangePanel(props: IProps) {
return (
<div
className={`
univer-relative univer-bottom-0 univer-mt-5 univer-w-full univer-border-t univer-border-solid
univer-border-t-gray-200
`}
className={clsx('univer-relative univer-bottom-0 univer-mt-5 univer-w-full', borderTopClassName)}
>
<div className="univer-relative univer-w-full">
<div className="univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start">
packages/slides-ui/src/components/panels/TransformPanel.tsx
+2 -5
View File
@@ -17,7 +17,7 @@
import type { Nullable } from '@univerjs/core';
import type { BaseObject, IChangeObserverConfig, Image, Rect, RichText } from '@univerjs/engine-render';
import { ICommandService, LocaleService } from '@univerjs/core';
import { InputNumber } from '@univerjs/design';
import { borderTopClassName, clsx, InputNumber } from '@univerjs/design';
import { useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import { UpdateSlideElementOperation } from '../../commands/operations/update-element.operation';
@@ -181,10 +181,7 @@ export default function TransformPanel(props: IProps) {
return (
<div
className={`
univer-relative univer-bottom-0 univer-mt-5 univer-w-full univer-border-t univer-border-solid
univer-border-t-gray-200
`}
className={clsx('univer-relative univer-bottom-0 univer-mt-5 univer-w-full', borderTopClassName)}
>
<div className="univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start">
<div className="univer-w-full univer-text-left univer-text-gray-600">
packages/slides-ui/src/components/slide-bar/SlideBar.tsx
+8 -9
View File
@@ -16,7 +16,7 @@
import type { SlideDataModel } from '@univerjs/core';
import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
import { clsx, scrollbarClassName } from '@univerjs/design';
import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design';
import { IRenderManagerService } from '@univerjs/engine-render';
import { useDependency } from '@univerjs/ui';
import { createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -98,11 +98,11 @@ export function SlideSideBar() {
<div className="univer-px-4">
<header className="univer-flex univer-justify-center univer-pt-4">
<a
className={`
className={clsx(`
univer-box-border univer-block univer-h-8 univer-w-full univer-cursor-pointer
univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white
univer-text-center univer-text-sm univer-leading-8 univer-transition-colors
`}
univer-rounded-md univer-bg-white univer-text-center univer-text-sm univer-leading-8
univer-transition-colors
`, borderClassName)}
onClick={handleAppendSlide}
>
{localeService.t('slide.append')}
@@ -120,11 +120,10 @@ export function SlideSideBar() {
<span>{index + 1}</span>
<div
ref={divRefs[index]}
className={`
univer-relative univer-box-border univer-h-32 univer-w-52 univer-border
univer-border-solid univer-border-gray-200 univer-bg-white
className={clsx(`
univer-relative univer-box-border univer-h-32 univer-w-52 univer-bg-white
hover:univer-border-primary-600
`}
`, borderClassName)}
/>
</div>
))}
packages/slides-ui/src/views/editor-container/EditorContainer.tsx
+2 -4
View File
@@ -16,6 +16,7 @@
import type { IDocumentData } from '@univerjs/core';
import { DEFAULT_EMPTY_DOCUMENT_VALUE, DocumentFlavor, IContextService } from '@univerjs/core';
import { borderClassName, clsx } from '@univerjs/design';
import { IEditorService } from '@univerjs/docs-ui';
import { FIX_ONE_PIXEL_BLUR_OFFSET } from '@univerjs/engine-render';
import { DISABLE_AUTO_FOCUS_KEY, useDependency, useObservable } from '@univerjs/ui';
@@ -118,10 +119,7 @@ export const SlideEditorContainer: React.FC<ICellIEditorProps> = () => {
return (
<div
className={`
univer-absolute univer-z-10 univer-box-border univer-flex univer-border univer-border-solid
univer-border-gray-200
`}
className={clsx('univer-absolute univer-z-10 univer-box-border univer-flex', borderClassName)}
style={{
left: state.left,
top: state.top,
packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx
+27 -11
View File
@@ -19,7 +19,7 @@ import type { IAddCommentCommandParams, IThreadComment, IUpdateCommentCommandPar
import type { IUniverUIConfig } from '@univerjs/ui';
import type { IThreadCommentEditorInstance } from '../thread-comment-editor';
import { generateRandomId, ICommandService, LocaleService, UserManagerService } from '@univerjs/core';
import { clsx, Dropdown, Tooltip } from '@univerjs/design';
import { borderClassName, clsx, Dropdown, Tooltip } from '@univerjs/design';
import { DeleteSingle, MoreHorizontalSingle, ReplyToCommentSingle, ResolvedSingle, SolveSingle } from '@univerjs/icons';
import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, getDT, ResolveCommentCommand, ThreadCommentModel, UpdateCommentCommand } from '@univerjs/thread-comment';
import { UI_PLUGIN_CONFIG_KEY, useConfigValue, useDependency, useObservable } from '@univerjs/ui';
@@ -145,7 +145,7 @@ const ThreadCommentItem = (props: IThreadCommentItemProps) => {
<ul
className={`
univer-m-0 univer-box-border univer-grid univer-list-none
univer-p-1.5 univer-text-sm univer-text-sm
univer-p-1.5 univer-text-sm
[&_a]:univer-block [&_a]:univer-cursor-pointer
[&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5
[&_a]:univer-transition-colors
@@ -188,7 +188,14 @@ const ThreadCommentItem = (props: IThreadCommentItemProps) => {
</div>
)
: null}
<div className="univer-mb-1 univer-text-xs/normal univer-text-gray-600">{item.dT}</div>
<time
className={`
univer-mb-1 univer-text-xs/normal univer-text-gray-600
dark:univer-text-gray-400
`}
>
{item.dT}
</time>
{editing
? (
<ThreadCommentEditor
@@ -217,7 +224,12 @@ const ThreadCommentItem = (props: IThreadCommentItemProps) => {
/>
)
: (
<div className="univer-text-smmal univer-text-gray-900">
<div
className={`
univer-text-smmal univer-text-gray-900
dark:univer-text-white
`}
>
{transformDocument2TextNodes(item.text).map((paragraph, i) => (
<div key={i} className="univer-break-words">
{paragraph.map((item, i) => {
@@ -343,19 +355,21 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
return (
<div
id={`${prefix}-${unitId}-${subUnitId}-${id}`}
className={clsx(
`
univer-relative univer-box-border univer-rounded-md univer-border univer-border-solid
univer-border-gray-200 univer-bg-white univer-p-4
univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4
dark:univer-bg-gray-900 dark:univer-text-white
`,
full ? 'univer-w-full' : 'univer-w-[278px]',
borderClassName,
{
'univer-w-[278px]': !full,
'univer-w-full': full,
'univer-shadow': !resolved && (showHighlight || isHover || prefix === 'cell'),
}
)}
style={style}
onClick={onClick}
id={`${prefix}-${unitId}-${subUnitId}-${id}`}
onMouseEnter={() => {
onMouseEnter?.();
setIsHover(true);
@@ -385,7 +399,7 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
<div
className={`
univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0
univer-rounded-sm univer-bg-yellow-400
univer-rounded-sm univer-bg-yellow-500
`}
/>
<Tooltip showIfEllipsis title={title}>
@@ -402,17 +416,18 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
? (
<div className="univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row">
<div
onClick={handleResolve}
className={clsx(
`
univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer
univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base
dark:hover:univer-bg-gray-800
hover:univer-bg-gray-50
`,
{
'univer-text-green-500': resolved,
}
)}
onClick={handleResolve}
>
{resolved ? <ResolvedSingle /> : <SolveSingle />}
</div>
@@ -423,6 +438,7 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer
univer-items-center univer-justify-center univer-rounded-[3px]
univer-text-base
dark:hover:univer-bg-gray-800
hover:univer-bg-gray-50
`}
onClick={handleDeleteRoot}
@@ -437,7 +453,7 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
</div>
<div
ref={scroller}
className="univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden"
className="univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden"
>
{renderComments.map(
(item) => (
packages/ui/src/components/menu/desktop/Menu.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ import { useScrollYOverContainer } from '../../hooks/layout';
import { UITinyMenuGroup } from './TinyMenuGroup';
const contentClassName = 'univer-inline-flex univer-gap-2 univer-items-center';
const moreIconClassName = 'univer-size-3.5 univer-text-gray-900';
const moreIconClassName = 'univer-size-3.5 univer-text-gray-900 dark:univer-text-white';
/** @deprecated */
export interface IBaseMenuProps {
packages/ui/src/views/components/ribbon/Ribbon.tsx
+5 -6
View File
@@ -17,7 +17,7 @@
import type { ComponentType } from 'react';
import type { IMenuSchema } from '../../../services/menu/menu-manager.service';
import { LocaleService } from '@univerjs/core';
import { clsx } from '@univerjs/design';
import { borderBottomClassName, clsx } from '@univerjs/design';
import { MoreFunctionSingle } from '@univerjs/icons';
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { IMenuManagerService } from '../../../services/menu/menu-manager.service';
@@ -238,12 +238,11 @@ export function Ribbon(props: IRibbonProps) {
<section
role="toolbar"
className={`
className={clsx(`
univer-relative univer-box-border univer-flex univer-h-8 univer-select-none univer-items-center
univer-border-0 univer-border-b univer-border-solid univer-border-b-gray-200 univer-bg-white
univer-text-base univer-text-gray-800 univer-transition-opacity
dark:univer-border-b-gray-700 dark:univer-bg-gray-900
`}
univer-bg-white univer-text-base univer-text-gray-800 univer-transition-opacity
dark:univer-bg-gray-900
`, borderBottomClassName)}
>
<div
className={clsx(`
packages/ui/src/views/components/ribbon/ToolbarItem.tsx
+2
View File
@@ -120,6 +120,7 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu
className={clsx(`
univer-relative univer-z-[1] univer-flex univer-h-full univer-items-center univer-rounded-l
univer-px-1 univer-transition-colors
dark:hover:univer-bg-gray-600
hover:univer-bg-gray-200
`, {
'univer-bg-gray-200 dark:univer-bg-gray-500': activated,
@@ -149,6 +150,7 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu
univer-absolute univer-right-0 univer-top-0 univer-box-border univer-flex univer-h-6
univer-w-5 univer-items-center univer-justify-center univer-rounded-r
univer-transition-colors
dark:hover:univer-bg-gray-600
hover:univer-bg-gray-200
`, {
'univer-pointer-events-none univer-cursor-not-allowed univer-text-gray-800/20': disabled,

Some files were not shown because too many files have changed in this diff Show More