@canlooks/can-ui 0.0.80 → 0.0.82

package/dist/cjs/components/cascade/cascadePanel.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CascadePanel = CascadePanel;
+const react_1 = require("@emotion/react");
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const loading_1 = require("../loading");
 const loadingIndicator_1 = require("../loadingIndicator");
@@ -39,9 +40,8 @@ function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...(0, utils_1.mergeComponentProps)({
-                    showCheckbox,
-                    key: optVal
+            return ((0, react_1.createElement)(menuItem_1.MenuItem, { ...(0, utils_1.mergeComponentProps)({
+                    showCheckbox
                 }, opt, {
                     checkboxProps: (0, utils_1.mergeComponentProps)(opt?.checkboxProps, showCheckbox
                         ? {
@@ -62,7 +62,7 @@ function CascadePanel({ options, index = 0 }) {
                         ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
                         : hasChildren && (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight }),
                     children: null
-                }) }));
+                }), key: optVal }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

package/dist/cjs/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/cjs/components/dataGrid/dataGrid.js

@@ -19,7 +19,7 @@ const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.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 }) => {
+exports.DataGrid = (0, react_1.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 }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -137,9 +137,11 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
                     className: dataGrid_style_1.classes.filterForm,
                     onFinish: filterHandler
                 }), children: (0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.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: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.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/cjs/components/dataGrid/dataGridRows.js

@@ -18,7 +18,9 @@ const faPlusSquare_1 = require("@fortawesome/free-regular-svg-icons/faPlusSquare
 const dataGrid_style_1 = require("./dataGrid.style");
 exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
     const { multiple, toggleSelected, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
-    const { rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = (0, dataGrid_1.useDataGridContext)();
+    const { slots, slotProps, rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = (0, dataGrid_1.useDataGridContext)();
+    const { tr: Tr = 'tr' } = slots || {};
+    const { tr: TrProps } = slotProps || {};
     return rows?.flatMap((row, i, arr) => {
         const trKey = row[primaryKey];
         if ((0, utils_1.isUnset)(trKey)) {
@@ -31,10 +33,12 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
         const currentExpanded = expandable && expandedSet.has(trKey);
         let expandableIndex = -2;
         const ret = [
-            (0, react_1.createElement)("tr", { ..._rowProps, key: trKey, className: (0, utils_1.clsx)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub), onClick: e => {
-                    _rowProps?.onClick?.(e);
-                    clickRowToSelect && toggleSelected(trKey, row);
-                }, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
+            (0, react_1.createElement)(Tr, { ...(0, utils_1.mergeComponentProps)(TrProps, _rowProps, {
+                    className: (0, utils_1.clsx)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub),
+                    onClick() {
+                        clickRowToSelect && toggleSelected(trKey, row);
+                    }
+                }), key: trKey, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
                 if (typeof col === 'symbol') {
                     if (col === dataGrid_1.DataGrid.EXPAND_COLUMN) {
                         expandableIndex = j;

package/dist/cjs/components/inputBase/inputBase.js

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

package/dist/esm/components/cascade/cascadePanel.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Loading } from '../loading';
 import { LoadingIndicator } from '../loadingIndicator';
@@ -36,9 +37,8 @@ export function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return (_jsx(MenuItem, { ...mergeComponentProps({
-                    showCheckbox,
-                    key: optVal
+            return (_createElement(MenuItem, { ...mergeComponentProps({
+                    showCheckbox
                 }, opt, {
                     checkboxProps: mergeComponentProps(opt?.checkboxProps, showCheckbox
                         ? {
@@ -59,7 +59,7 @@ export function CascadePanel({ options, index = 0 }) {
                         ? _jsx(LoadingIndicator, {})
                         : hasChildren && _jsx(Icon, { icon: faChevronRight }),
                     children: null
-                }) }));
+                }), key: optVal }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

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

@@ -3,7 +3,7 @@ import { createElement as _createElement } from "@emotion/react";
 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,10 +30,12 @@ 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) => {
+            _createElement(Tr, { ...mergeComponentProps(TrProps, _rowProps, {
+                    className: clsx(_rowProps, _level > 0 && classes.sub),
+                    onClick() {
+                        clickRowToSelect && toggleSelected(trKey, row);
+                    }
+                }), key: trKey, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
                 if (typeof col === 'symbol') {
                     if (col === DataGrid.EXPAND_COLUMN) {
                         expandableIndex = j;

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/package.json

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