@canlooks/can-ui 0.0.79 → 0.0.81

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

@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
     'yearItem',
     'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${classes.monthItem},
-                .${classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
+    popover: "" | "auto" | "manual" | "hint";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

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

@@ -1,5 +1,5 @@
 import React, { ComponentProps, ReactElement, ReactNode } from 'react';
-import { DivProps, Id, Obj, ToRequired } from '../../types';
+import { DivProps, Id, Obj, SlotsAndProps, ToRequired } from '../../types';
 import { SelectionContextProps } from '../selectionContext';
 import { PaginationProps } from '../pagination';
 import { TableProps } from '../table';
@@ -35,7 +35,9 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
     /** @private 内部使用，在{@link DataGridHead}内计算 */
     _negativeRowSpan?: number;
 }
-type DataGridSharedProps<R extends RowType = RowType> = {
+interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps<{
+    tr: ComponentProps<'tr'>;
+}> {
     rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;
     /** 数据的主键名，默认为`id` */
     primaryKey?: keyof R;
@@ -50,7 +52,7 @@ type DataGridSharedProps<R extends RowType = RowType> = {
     /** 子行缩进，默认为`24` */
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-};
+}
 export type OrderType = 'ascend' | 'descend';
 export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];

package/dist/esm/components/dataGrid/dataGrid.js

@@ -15,7 +15,7 @@ const DataGridContext = createContext({});
 export function useDataGridContext() {
     return useContext(DataGridContext);
 }
-export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -133,9 +133,11 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
                     className: classes.filterForm,
                     onFinish: filterHandler
                 }), children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+                                                    slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns, toggleExpanded
                                                 }), [
+                                                    slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns
                                                 ]), children: !!paginatedRows?.length &&

package/dist/esm/components/dataGrid/dataGridRows.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { DataGrid, useDataGridContext } from './dataGrid';
 import { useSelectionContext } from '../selectionContext';
-import { clsx, isUnset, renderCell } from '../../utils';
+import { clsx, isUnset, mergeComponentProps, renderCell } from '../../utils';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
 import { TdCell } from '../table';
@@ -15,7 +15,9 @@ import { faPlusSquare } from '@fortawesome/free-regular-svg-icons/faPlusSquare';
 import { classes } from './dataGrid.style';
 export const DataGridRows = memo(({ rows, _level = 0 }) => {
     const { multiple, toggleSelected, selectionStatus } = useSelectionContext();
-    const { rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = useDataGridContext();
+    const { slots, slotProps, rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = useDataGridContext();
+    const { tr: Tr = 'tr' } = slots || {};
+    const { tr: TrProps } = slotProps || {};
     return rows?.flatMap((row, i, arr) => {
         const trKey = row[primaryKey];
         if (isUnset(trKey)) {
@@ -28,40 +30,43 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
         const currentExpanded = expandable && expandedSet.has(trKey);
         let expandableIndex = -2;
         const ret = [
-            _createElement("tr", { ..._rowProps, key: trKey, className: clsx(_rowProps, _level > 0 && classes.sub), onClick: e => {
-                    _rowProps?.onClick?.(e);
-                    clickRowToSelect && toggleSelected(trKey, row);
-                }, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
-                if (typeof col === 'symbol') {
-                    if (col === DataGrid.EXPAND_COLUMN) {
-                        expandableIndex = j;
-                        return [];
+            _jsx(Tr, { ...mergeComponentProps(TrProps, _rowProps, {
+                    key: trKey,
+                    className: clsx(_rowProps, _level > 0 && classes.sub),
+                    onClick() {
+                        clickRowToSelect && toggleSelected(trKey, row);
                     }
-                    // col === DataGrid.SELECT_COLUMN
-                    if (expandableIndex === j - 1) {
-                        // select column紧跟在expand column后面，需要顺延expandableIndex
-                        expandableIndex = j;
+                }), "data-selected": status === 2, children: flattedColumns?.flatMap((col, j) => {
+                    if (typeof col === 'symbol') {
+                        if (col === DataGrid.EXPAND_COLUMN) {
+                            expandableIndex = j;
+                            return [];
+                        }
+                        // col === DataGrid.SELECT_COLUMN
+                        if (expandableIndex === j - 1) {
+                            // select column紧跟在expand column后面，需要顺延expandableIndex
+                            expandableIndex = j;
+                        }
+                        const Component = multiple ? Checkbox : Radio;
+                        return (_jsx(TdCell, { className: classes.selectable, sticky: j === 0 ? 'left' : void 0, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
+                                    toggleSelected(trKey, row);
+                                }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
                     }
-                    const Component = multiple ? Checkbox : Radio;
-                    return (_jsx(TdCell, { className: classes.selectable, sticky: j === 0 ? 'left' : void 0, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
-                                toggleSelected(trKey, row);
-                            }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
-                }
-                const { 
-                // 排除无需加入dom节点的属性
-                // width属性只需加入thead列中，普通列需排除
-                // rowSpan与colSpan需排除
-                title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
-                const renderedContent = renderCell({ render, field }, row, i, arr);
-                const shouldRenderExpand = expandableIndex === j - 1;
-                return (_createElement(TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
-                    ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
-                                    ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
-                                    : currentExpanded
-                                        ? _jsx(Icon, { icon: faMinusSquare })
-                                        : _jsx(Icon, { icon: faPlusSquare }) }), renderedContent] })
-                    : renderedContent));
-            }))
+                    const { 
+                    // 排除无需加入dom节点的属性
+                    // width属性只需加入thead列中，普通列需排除
+                    // rowSpan与colSpan需排除
+                    title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                    const renderedContent = renderCell({ render, field }, row, i, arr);
+                    const shouldRenderExpand = expandableIndex === j - 1;
+                    return (_createElement(TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
+                        ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
+                                        ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
+                                        : currentExpanded
+                                            ? _jsx(Icon, { icon: faMinusSquare })
+                                            : _jsx(Icon, { icon: faPlusSquare }) }), renderedContent] })
+                        : renderedContent));
+                }) })
         ];
         if (Array.isArray(children)) {
             currentExpanded && ret.push(_jsx(DataGridRows, { rows: children, _level: _level + 1 }, trKey + '_children'));

package/dist/esm/components/inputBase/inputBase.js

@@ -57,7 +57,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
         if (!clearable || disabled || readOnly) {
             return false;
         }
-        return isNoValue(innerValue.current);
+        return !isNoValue(innerValue.current);
     };
     return (_jsxs("div", { ...mergeComponentProps(props, {
             ref: innerRef,

package/dist/esm/components/popper/popper.js

@@ -465,9 +465,10 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             const click = () => {
                 setOpenForce(false);
             };
-            anchorRef.current.addEventListener('click', click);
+            const anchorEl = anchorRef.current;
+            anchorEl.addEventListener('click', click);
             return () => {
-                anchorRef.current.removeEventListener('click', click);
+                anchorEl.removeEventListener('click', click);
             };
         }
     }, [clickToClose]);

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

@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

package/extensions/curd.cjs

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);

package/extensions/documentViewer.cjs

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);

package/extensions/textFormatter.cjs

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.79",
+  "version": "0.0.81",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",