@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/esm/components/pagination/index.js

@@ -1 +1,5 @@
 export * from './pagination';
+export * from './counter';
+export * from './jumper';
+export * from './pager';
+export * from './sizer';

package/dist/esm/components/pagination/jumper.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'react';
-import { DIVProps } from '../../types';
+import { DivProps } from '../../types';
 import { InputProps } from '../input';
-export interface PaginationJumperProps extends DIVProps {
+export interface PaginationJumperProps extends DivProps {
     InputProps?: InputProps;
     InputRef?: Ref<HTMLDivElement>;
 }

package/dist/esm/components/pagination/jumper.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useState } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes } from './pagination.style';
 import { Input } from '../input';
 import { usePaginationContext } from './pagination';
 export const PaginationJumper = memo(({ InputProps, InputRef, ...props }) => {
-    const { size, onPageChange, pageNum } = usePaginationContext();
+    const { size, onPageChange, pageCount } = usePaginationContext();
     const [inputValue, setInputValue] = useState('');
     const changeFn = () => {
         const targetPage = parseInt(inputValue);
         if (!isNaN(targetPage)) {
-            onPageChange(Math.max(1, Math.min(targetPage, pageNum)));
+            onPageChange(Math.max(1, Math.min(targetPage, pageCount)));
         }
         setInputValue('');
     };
-    return (_jsxs("div", { ...props, className: classnames(classes.jumper, props.className), children: [_jsx("span", { children: "\u8DF3\u81F3" }), _jsx(Input, { size: size, clearable: false, ...InputProps, ref: InputRef, className: classnames(classes.input, InputProps?.className), value: inputValue, onChange: e => setInputValue(e.target.value), onBlur: changeFn, onKeyDown: e => e.key === 'Enter' && changeFn() }), _jsx("span", { children: "\u9875" })] }));
+    return (_jsxs("div", { ...props, className: clsx(classes.jumper, props.className), children: [_jsx("span", { children: "\u8DF3\u81F3" }), _jsx(Input, { size: size, clearable: false, ...InputProps, ref: InputRef, className: clsx(classes.input, InputProps?.className), value: inputValue, onChange: e => setInputValue(e.target.value), onBlur: changeFn, onKeyDown: e => e.key === 'Enter' && changeFn() }), _jsx("span", { children: "\u9875" })] }));
 });

package/dist/esm/components/pagination/pager.d.ts

@@ -1,4 +1,4 @@
-import { DIVProps } from '../../types';
-export interface PaginationPagerProps extends DIVProps {
+import { DivProps } from '../../types';
+export interface PaginationPagerProps extends DivProps {
 }
 export declare const PaginationPager: import("react").MemoExoticComponent<(props: PaginationPagerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/pagination/pager.js

@@ -1,23 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { EllipsisOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { memo } from 'react';
 import { Button } from '../button';
 import { classes } from './pagination.style';
 import { usePaginationContext } from './pagination';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
+import { Icon } from '../..';
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons/faEllipsis';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 export const PaginationPager = memo((props) => {
     const { text } = useTheme();
-    const { size, pageNum, page, onPageChange } = usePaginationContext();
+    const { size, pageCount, page, onPageChange } = usePaginationContext();
     const renderPageButton = (i, ellipsis) => {
         const btnPage = i + 1;
         const isActive = !ellipsis && btnPage === page;
-        return (_jsx(Button, { className: classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? _jsx(EllipsisOutlined, {}) : btnPage }, i));
+        return (_jsx(Button, { className: classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? _jsx(Icon, { icon: faEllipsis }) : btnPage }, i));
     };
     const renderPageList = () => {
-        if (pageNum <= 9) {
+        if (pageCount <= 9) {
             // 少于9页无需省略号
-            return Array(pageNum).fill(void 0).map((_, i) => {
+            return Array(pageCount).fill(void 0).map((_, i) => {
                 return renderPageButton(i);
             });
         }
@@ -25,16 +28,16 @@ export const PaginationPager = memo((props) => {
             // 当前页小于6，只需右侧省略号
             return Array(9).fill(void 0).map((_, i) => {
                 return i === 8
-                    ? renderPageButton(pageNum - 1)
+                    ? renderPageButton(pageCount - 1)
                     : renderPageButton(i, i === 7);
             });
         }
-        if (page > pageNum - 5) {
+        if (page > pageCount - 5) {
             // 只需左侧省略号
             return Array(9).fill(void 0).map((_, i) => {
                 return i === 0
                     ? renderPageButton(i)
-                    : renderPageButton(pageNum - 9 + i, i === 1);
+                    : renderPageButton(pageCount - 9 + i, i === 1);
             });
         }
         // 两侧都有省略号
@@ -42,9 +45,9 @@ export const PaginationPager = memo((props) => {
             return i === 0
                 ? renderPageButton(i)
                 : i === 8
-                    ? renderPageButton(pageNum - 1)
+                    ? renderPageButton(pageCount - 1)
                     : renderPageButton(page + i - 5, i === 1 || i === 7);
         });
     };
-    return (_jsxs("div", { ...props, className: classnames(classes.pager, props.className), children: [_jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: _jsx(LeftOutlined, {}) }), renderPageList(), _jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === pageNum, onClick: () => onPageChange(page + 1), children: _jsx(RightOutlined, {}) })] }));
+    return (_jsxs("div", { ...props, className: clsx(classes.pager, props.className), children: [_jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: _jsx(Icon, { icon: faAngleLeft }) }), renderPageList(), _jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: _jsx(Icon, { icon: faAngleRight }) })] }));
 });

package/dist/esm/components/pagination/pagination.d.ts

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
-import { DIVProps, Size } from '../../types';
+import { DivProps, Size } from '../../types';
 import { PaginationPager } from './pager';
 import { PaginationSizer } from './sizer';
 import { PaginationJumper } from './jumper';
 import { PaginationCounter } from './counter';
-export interface PaginationProps extends Omit<DIVProps, 'onChange'> {
+export interface PaginationProps extends Omit<DivProps, 'onChange'> {
     size?: Size;
     total?: number;
     defaultPage?: number;
@@ -18,7 +18,7 @@ export interface PaginationProps extends Omit<DIVProps, 'onChange'> {
 export declare function usePaginationContext(): {
     size: Size;
     total: number;
-    pageNum: number;
+    pageCount: number;
     page: number;
     onPageChange(page: number): void;
     pageSize: number;

package/dist/esm/components/pagination/pagination.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext } from 'react';
 import { classes, style } from './pagination.style';
-import { classnames, useControlled } from '../../utils';
+import { clsx, useControlled } from '../../utils';
 import { PaginationPager } from './pager';
 import { PaginationSizer } from './sizer';
 import { PaginationJumper } from './jumper';
@@ -9,7 +9,7 @@ import { PaginationCounter } from './counter';
 const PaginationContext = createContext({
     size: 'small',
     total: 0,
-    pageNum: 1,
+    pageCount: 1,
     page: 1,
     onPageChange(page) { },
     pageSize: 10,
@@ -29,10 +29,10 @@ export const Pagination = memo(({ size = 'small', total = 0, defaultPage = 1, pa
         setInnerPageSize(pageSize);
         onChange?.(innerPage.current, pageSize);
     };
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: _jsx(PaginationContext, { value: {
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), children: _jsx(PaginationContext, { value: {
                 size,
                 total,
-                pageNum: Math.max(Math.ceil(total / innerPageSize.current), 1),
+                pageCount: Math.max(Math.ceil(total / innerPageSize.current), 1),
                 page: innerPage.current,
                 onPageChange: pageChangeHandler,
                 pageSize: innerPageSize.current,
@@ -40,3 +40,7 @@ export const Pagination = memo(({ size = 'small', total = 0, defaultPage = 1, pa
             }, children: props.children ||
                 _jsxs(_Fragment, { children: [_jsx(PaginationCounter, {}), _jsx(PaginationPager, {}), _jsx(PaginationSizer, {}), _jsx(PaginationJumper, {})] }) }) }));
 });
+Pagination.Counter = PaginationCounter;
+Pagination.Pager = PaginationPager;
+Pagination.Sizer = PaginationSizer;
+Pagination.Jumper = PaginationJumper;

package/dist/esm/components/pagination/sizer.js

@@ -1,10 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { Select } from '../select';
 import { usePaginationContext } from './pagination';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes } from './pagination.style';
+const defaultSizerOptions = [
+    { value: 10, label: '10 条/页' },
+    { value: 20, label: '20 条/页' },
+    { value: 50, label: '50 条/页' },
+    { value: 100, label: '100 条/页' }
+];
 export const PaginationSizer = memo((props) => {
     const { size, pageSize, onPageSizeChange } = usePaginationContext();
-    return (_jsxs(Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: (v) => v + ' 条/页', sizeAdaptable: false, ...props, className: classnames(classes.pager, props.className), children: [_jsx(Select.Option, { value: 10, label: "10 \u6761/\u9875" }), _jsx(Select.Option, { value: 20, label: "20 \u6761/\u9875" }), _jsx(Select.Option, { value: 50, label: "50 \u6761/\u9875" }), _jsx(Select.Option, { value: 100, label: "100 \u6761/\u9875" })] }));
+    return (_jsx(Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: v => v + ' 条/页', sizeAdaptable: false, options: defaultSizerOptions, ...props, className: clsx(classes.sizer, props.className) }));
 });

package/dist/esm/components/palette/colorValueInput.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { FixInputNumberParam } from '../../utils';
-import { DIVProps } from '../../types';
-interface ColorValueInputProps extends Omit<DIVProps, 'onChange'>, FixInputNumberParam {
+import { DivProps } from '../../types';
+interface ColorValueInputProps extends Omit<DivProps, 'onChange'>, FixInputNumberParam {
     value: string | number;
     label: ReactNode;
     onChange(value: string): void;

package/dist/esm/components/palette/palette.d.ts

@@ -1,10 +1,10 @@
-import { DIVProps } from '../../types';
+import { DivProps } from '../../types';
 import { DraggableOptions } from '../../utils';
-import Color from 'color';
-export interface PaletteProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
-    defaultValue?: Color;
-    value?: Color;
-    onChange?(value: Color): void;
+import { ColorInstance } from 'color';
+export interface PaletteProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
+    defaultValue?: ColorInstance;
+    value?: ColorInstance;
+    onChange?(value: ColorInstance): void;
     draggableOptions?: DraggableOptions<HTMLDivElement>;
 }
 export declare const Palette: import("react").MemoExoticComponent<({ defaultValue, value, onChange, draggableOptions, ...props }: PaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/palette/palette.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { classes, style } from './palette.style';
-import { classnames, range, useControlled, useDraggableHandle } from '../../utils';
+import { clsx, range, useControlled, useDraggableHandle } from '../../utils';
 import { useTheme } from '../theme';
 import { Slider } from '../slider';
 import Color from 'color';
 import { Button } from '../button';
-import { DownOutlined } from '@ant-design/icons';
 import { ColorValueInput } from './colorValueInput';
+import { Icon } from '../..';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 const sliderProps = {
     railSize: 9,
     handleSize: 9,
@@ -47,7 +48,6 @@ export const Palette = memo(({ defaultValue, value, onChange, draggableOptions,
         setInnerValue(innerValue.current.black(newTop).saturationv(newLeft).hue(hue));
         return [newLeft, newTop];
     };
-    const dragStartData = useRef(void 0);
     const draggableHandle = useDraggableHandle({
         ...draggableOptions,
         onDragStart(e) {
@@ -61,7 +61,7 @@ export const Palette = memo(({ defaultValue, value, onChange, draggableOptions,
                 const { x, y } = paletteRef.current.getBoundingClientRect();
                 startPosition = setHandlePosition((e.clientX - x) / paletteWidth * 100, (e.clientY - y) / paletteHeight * 100, hue);
             }
-            dragStartData.current = {
+            return {
                 left: startPosition[0],
                 top: startPosition[1],
                 paletteWidth,
@@ -71,7 +71,7 @@ export const Palette = memo(({ defaultValue, value, onChange, draggableOptions,
         },
         onDrag(info, e) {
             draggableOptions?.onDrag?.(info, e);
-            const { top, left, paletteWidth, paletteHeight, hue } = dragStartData.current;
+            const { top, left, paletteWidth, paletteHeight, hue } = info.startData;
             setHandlePosition(left + info.deltaX / paletteWidth * 100, top + info.deltaY / paletteHeight * 100, hue);
         }
     });
@@ -104,11 +104,11 @@ export const Palette = memo(({ defaultValue, value, onChange, draggableOptions,
                     }
                 })(), commonAlphaItem] }));
     };
-    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), children: [_jsxs("div", { ref: paletteRef, className: classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [_jsx("div", { className: classes.mask }), _jsx("div", { className: classes.handle, style: {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsxs("div", { ref: paletteRef, className: classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [_jsx("div", { className: classes.mask }), _jsx("div", { className: classes.handle, style: {
                             left: handlePosition[0] + '%',
                             top: handlePosition[1] + '%'
                         }, ...draggableHandle })] }), _jsxs("div", { className: classes.slidersRow, children: [_jsxs("div", { className: classes.sliders, children: [_jsx(Slider, { ...sliderProps, className: classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), _jsx(Slider, { ...sliderProps, className: classes.alpha, renderRail: (_, railProps) => _jsxs("div", { ...railProps, children: [railProps.children, _jsx("div", { className: classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), _jsx("div", { className: classes.preview, children: _jsx("div", { className: classes.previewColor, style: {
                                 backgroundColor: colorObject.hex,
                                 opacity: colorObject.alpha
-                            } }) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(Button, { variant: "plain", color: "text", suffix: _jsx(DownOutlined, {}), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
+                            } }) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(Button, { variant: "plain", color: "text", suffix: _jsx(Icon, { icon: faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
 });

package/dist/esm/components/palette/palette.style.d.ts

@@ -4,9 +4,9 @@ export declare const classes: {
     mask: string;
     hue: string;
     alpha: string;
+    sliders: string;
     handle: string;
     slidersRow: string;
-    sliders: string;
     alphaMask: string;
     preview: string;
     previewColor: string;

package/dist/esm/components/pickerDialog/pickerDialog.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useImperativeHandle, useRef, useState } from 'react';
 import { Dialog } from '../dialog';
-import { classnames, toArray, useControlled } from '../../utils';
+import { clsx, toArray, useControlled } from '../../utils';
 import { classes, style } from './pickerDialog.style';
 import { SelectionContext } from '../selectionContext';
 import { Divider } from '../divider';
 import { SelectedList } from '../selectedList';
 import { Button } from '../button';
-import { DeleteOutlined } from '@ant-design/icons';
+import { Icon } from '../..';
+import { faTrashCan } from '@fortawesome/free-regular-svg-icons/faTrashCan';
 export const PickerDialog = (({ ref, dialogRef, multiple, children, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, rows, nodes, 
 // 以下属性从SelectionContextBaseProps继承
 options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', disabled, clearable = !!multiple, onToggle, ...props }) => {
-    const resolveFn = useRef(void 0);
-    const rejectFn = useRef(void 0);
+    const resolvers = useRef(void 0);
     const [innerValue, _setInnerValue] = useState(multiple ? [] : null);
     const setInnerValue = (value) => {
         _setInnerValue(value);
@@ -24,10 +24,8 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         open(value) {
             _setInnerValue(value ?? null);
             setInnerOpen(true);
-            return new Promise((resolve, reject) => {
-                resolveFn.current = resolve;
-                rejectFn.current = reject;
-            });
+            const { promise } = resolvers.current = Promise.withResolvers();
+            return promise;
         }
     }));
     const onCloseHandler = (reason) => {
@@ -36,21 +34,19 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         }
         props.onClose?.(reason);
         if (!open) {
-            rejectFn.current?.({
+            resolvers.current?.reject({
                 type: 'canceled',
                 value: innerValue
             });
-            resolveFn.current = rejectFn.current = void 0;
         }
         setInnerOpen(false);
     };
     const confirmHandler = (value = innerValue) => {
         onConfirm?.(value);
-        resolveFn.current?.(value);
-        resolveFn.current = rejectFn.current = void 0;
+        resolvers.current?.resolve(value);
         setInnerOpen(false);
     };
-    const exitedHanlder = () => {
+    const exitedHandler = () => {
         props.modalProps?.onExited?.();
         _setInnerValue(null);
     };
@@ -66,11 +62,11 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 : children;
     };
     const selectedCount = toArray(innerValue)?.length || 0;
-    return (_jsx(SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: style, className: classnames(classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
-                onExited: exitedHanlder,
+    return (_jsx(SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
+                onExited: exitedHandler,
                 ...props.modalProps
             }, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: (_jsxs("div", { className: classes.selectedArea, children: [_jsxs(Divider, { className: classes.count, textAlign: "start", children: [_jsxs("div", { children: ["\u5DF2\u9009\u62E9", _jsx("b", { children: selectedCount }), "\u9879"] }), clearable &&
-                                    _jsx(Button, { prefix: _jsx(DeleteOutlined, {}), variant: "plain", color: "text", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: classnames(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
+                                    _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "text", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: clsx(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
             }, children: renderChildren() }) }));
 });

package/dist/esm/components/pickerDialog/pickerDialog.style.d.ts

@@ -1,9 +1,9 @@
 export declare const classes: {
     content: string;
-    confirm: string;
     list: string;
     selectedArea: string;
     count: string;
+    confirm: string;
 } & {
     root: string;
 };

package/dist/esm/components/placeholder/placeholder.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DIVProps, Status } from '../../types';
+import { DivProps, SlotsAndProps, Status } from '../../types';
 export declare const imagePreset: {
     emptyLight: string;
     emptyDark: string;
@@ -9,12 +9,15 @@ export declare const imagePreset: {
     info: string;
     searching: string;
 };
-export interface PlaceholderProps extends Omit<DIVProps, 'title'> {
+export interface PlaceholderProps extends Omit<DivProps, 'title'>, SlotsAndProps<{
+    title: DivProps;
+    description: DivProps;
+    extra: DivProps;
+}> {
     status?: 'empty' | 'searching' | Status;
     image?: ReactNode;
     title?: ReactNode;
     description?: ReactNode;
-    descriptionComponent?: any;
     extra?: ReactNode;
 }
-export declare const Placeholder: import("react").MemoExoticComponent<({ status, image, title, description, descriptionComponent: DescriptionComponent, extra, ...props }: PlaceholderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Placeholder: import("react").MemoExoticComponent<({ slots, slotProps, status, image, title, description, extra, ...props }: PlaceholderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/placeholder/placeholder.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, style } from './placeholder.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 export const imagePreset = {
     emptyLight: 'data:image/png;base64,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',
@@ -12,18 +12,20 @@ export const imagePreset = {
     info: 'data:image/png;base64,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',
     searching: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0ElEQVR4nO2dTWgdVRTHn4KI7l2IgriwggsXinbr1o+Fgoppm5jaUgsV0YIBq6ZaN8GFqItGEW3jB4KgCBIapQjFom/O/3/fix8VkhQ/4gdFKVpijSnakWtGiOl7c2fefNyZuffA2eTl3Xvf+Z1z7vdMq+XFixcvXrx48eLFixcvOQrJi4Mg2ADgJpK3krwLwFCZSvIV56AuLi5e1Ol0blBK3VO2wXEugJDkqy1XpN1uX27D0xEPIHQiEkTk6ip4PXoDaDYE7flVMz7OBdDMdKQ72yqlHcQDaF4kkNxo29BIB6A5kaC9v4qpB2YAzYiE2dnZDVUwNAYDUP9I0JOsmgMIax0JJG9rAICwtpFQ1dEP0gOoJwTbBka+AOoHoYEAwlpBaCiAsDYQGgwgrAWEEo05IiJTABYA/BnpAsmD+rOY7y03GkIZxheRXQC+7Wck/Vn0P72+/0NGAFonW1WVMjwfMcZfC6FPJBzKAUB1I6EE759KaiQAB3qUMUby75wgTDoHgOTxFAAW+pTxYU4AqgehhBS0nALAcp8oGgbwZSMhVAkAyT9iUtkwyQ8al47qkILwfxCPkJwmuZjDEHXSBQAHM3bChapt+1dqGCqrud4DqNhEbMhHQD4QhqMUsxCNdrTO67/Z8HyXUtBQldW2/T0A22LbA+EjwL4R4FNQ7kZ4gGRAcpCJkv6OANjt+4DBjb+Uw1LBUhlD08b1AVz1/LwWzdoeQHoAyzkC6Ls45yOgHACnPYD0ESA5Agg8gPThvjuvTlgp9bAHMEC+FZFdugPVOXyQvK89vwzjN3IUhJqpbft7ALbFtgfCR4B9I8CnIPuGgCW1nYF8CrIttj0QPgLsGwE5qYhsITmulHpZRN7TB7n04V4A75LcH50z3dSEFJRlvT80KYDPgiDYnMLw+0h+nLA9vwGY0TDqCiCv9f6wj/FPkNyepC1KqcdIzg1Yz9loxn1FrQDkvN4frlN97nM8SaqJUkzmc6IAfid5d50AFJJ2uKrTCeofBTCbc9TpaNgXhuF5zgIAsARgm6H+EZLHinIAAM/VAUCe6/3hGn0zQeo5WmD0/QdhW6UB5LjeH6750csicp/B+PuLNn7UlhWS11UZQNb1/rCHHo6rLwiCe0meTFHeN9Edgtd0ZEVXnE6k+P5HlQZQtpJ8K6H3HhORPTHlTCS99ioiN3sAWO14dQedwGjT62e5MaMoJijvqAeAf9Pdswk8/8gAUOcNZZ5tt9tXOp+CSB42ADhl6sBjBhN/GSDsdB4ADNebROTtDP3LJwa4U04DILmJ5IrBS8cylP+CoexPnQaglNpqytN6XShDHWOGCDjuNAAR2VHk2dFoPhMH+MfG7wdIzAW9IAhGTRFgeNZQrJLcY2jfnAv7AdsNRjptALh3UAB658wA+Ejj9wOCIDDdhFkwGOlQhgj4wtC+F11Yjp4w1Pm+4fsrOioH+B1Pm9qmlNpSuQe35g0AwBtx9YmI0VAA5lL2BTtJ/mIo90yn07mkco8uLmA/oG2oT6/v/JygnM+T7CWLyEMkv0/SrlZFH96d634AgFMJTkAcSFjeyahjHe1h+B161pwygscLBxC9psrqfgCApwx1jiilfkpR5hmSX+mjKnq5IerIB93AH3f6BQ6IVCmlIcUunhWoxULodrs32jYwkulLlgBo3Vv0i9vurICBhxLoTCMhkLy0DqkIqyOjqRwf3pdWJwp9n0xdICilntEjqMZFQrfbvawu6UhEtgJ4Rz8I3AKEBwuDMD8/f2G73b5eROoSDfcDeF3PiA3bjPrm/YzeZwDwZEYAeqZ8VavoIaquxObrbJEehr4joGe7T+gjKkopvadwu1LqWpIXrP19AB7PCOH5QgG4IMgGoWu7/a5D+M52252GUMqmvUuClBB0R267zc5CAPBrKfsFLgrJR6NbM/2Mr19AdIvtdjZaSN5B8usextcnezfabp8TEobh+dHLrvXVqM2dTuea9f/0D/kpCFxyBQcLAAAAAElFTkSuQmCC'
 };
-export const Placeholder = memo(({ status = 'empty', image, title = status === 'warning' ? '警告'
+export const Placeholder = memo(({ slots = {}, slotProps = {}, status = 'empty', image, title = status === 'warning' ? '警告'
     : status === 'error' ? '出错啦'
         : status === 'success' ? '成功'
             : void 0, description = status === 'empty' ? '暂无数据'
     : status === 'searching' ? '搜索中...'
-        : void 0, descriptionComponent: DescriptionComponent = 'div', extra, ...props }) => {
+        : void 0, extra, ...props }) => {
     const { mode } = useTheme();
-    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), children: [image ??
+    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots;
+    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps;
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [image ??
                 _jsx("img", { className: classes.image, src: status === 'empty'
                         ? (mode === 'light' ? imagePreset.emptyLight : imagePreset.emptyDark)
                         : imagePreset[status], alt: "" }), !!title &&
-                _jsx("div", { className: classes.title, children: title }), !!description &&
-                _jsx(DescriptionComponent, { className: classes.description, children: description }), !!extra &&
-                _jsx("div", { className: classes.extra, children: extra })] }));
+                _jsx(Title, { ...titleProps, className: clsx(classes.title, titleProps?.className), children: title }), !!description &&
+                _jsx(Description, { ...descriptionProps, className: clsx(classes.description, descriptionProps?.className), children: description }), !!extra &&
+                _jsx(Extra, { ...extraProps, className: clsx(classes.extra, extraProps?.className), children: extra })] }));
 });

package/dist/esm/components/placeholder/placeholder.style.js

@@ -9,6 +9,7 @@ export const classes = defineClasses('placeholder', [
 export const style = defineCss(({ spacing, text }) => css `
     width: 100%;
     height: 100%;
+    flex: 1;
     padding: ${spacing[8]}px 0;
     display: flex;
     flex-direction: column;

package/dist/esm/components/popper/popper.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode, Ref } from 'react';
-import { DIVProps, DefineElement, Placement } from '../../types';
+import { DivProps, DefineElement, Placement } from '../../types';
 export type Trigger = 'click' | 'hover' | 'focus' | 'enter' | 'contextMenu';
-export interface PopperProps extends Omit<DIVProps, 'content' | 'children'> {
+export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     popperRef?: Ref<PopperRef | null>;
     /** 若不指定anchorElement，默认使用{@link children}作为目标锚点元素 */
     anchorElement?: DefineElement<HTMLElement>;
@@ -11,6 +11,7 @@ export interface PopperProps extends Omit<DIVProps, 'content' | 'children'> {
     content?: ReactNode;
     /** 弹框偏离元素的距离 */
     offset?: number;
+    /** 自动打开弹框的触发方法，默认为`hover` */
     trigger?: Trigger | Trigger[] | false;
     placement?: Placement;
     variant?: 'zoom' | 'collapse';
@@ -37,7 +38,7 @@ export interface PopperProps extends Omit<DIVProps, 'content' | 'children'> {
      * @enum {undefined} 第一次打开时渲染，跟随父组件销毁。
      */
     forceRender?: boolean;
-    children?: ReactElement;
+    children?: ReactElement<any>;
 }
 export interface PopperRef extends HTMLDivElement {
     fit(options?: {