@canlooks/can-ui 0.0.158 → 0.0.160

package/dist/cjs/components/curd/curdColumnConfig.d.ts

@@ -2,11 +2,10 @@ import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { CurdColumn } from './curd';
 import { RowType } from '../dataGrid';
 import { Id } from '../../types';
-type CurdColumnConfigProps<R extends RowType> = {
+export type CurdColumnConfigProps<R extends RowType> = {
     columns?: CurdColumn<R>[];
     innerVisible: Id[];
     setInnerVisible: Dispatch<SetStateAction<Id[]>>;
     setInnerOrder: Dispatch<SetStateAction<Id[]>>;
 };
 export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;
-export {};

package/dist/cjs/components/curd/curdColumnConfig.js

@@ -14,7 +14,7 @@ const sortable_1 = require("@dnd-kit/sortable");
 const utils_1 = require("../../utils");
 const icon_1 = require("../icon");
 const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
-exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, setInnerOrder, }) => {
+exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, setInnerOrder }) => {
     columns ||= [];
     const dragEndHandler = (e) => {
         const newColumns = (0, utils_1.onDndDragEnd)(e, columns, '_key');
@@ -24,9 +24,16 @@ exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerV
         return new Set(innerVisible);
     }, [innerVisible]);
     const toggleVisible = (key, checked) => {
-        setInnerVisible(o => checked
+        !(0, utils_1.isUnset)(key) && setInnerVisible(o => checked
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+                            const id = col._key;
+                            const checked = !(0, utils_1.isUnset)(id) && visibleSet.has(id);
+                            return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: id ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: checked, onChange: e => {
+                                        e.stopPropagation();
+                                        toggleVisible(id, e.target.checked);
+                                    } }), onClick: () => toggleVisible(id, !checked), label: col.titleText ?? col.title, noStyle: true }, id ?? i));
+                        })] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
 });

package/dist/cjs/components/curd/curdColumnConfig.style.js

@@ -32,8 +32,8 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
             }
 
             .${exports.classes.item} {
-                cursor: move;
-
+                    cursor: pointer;
+                
                 &[data-dragging=true] {
                     position: relative;
                     z-index: 1;

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

@@ -12,6 +12,8 @@ import { BubbleProps } from '../bubble';
 export type RowType = Obj;
 export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
+    /** 当`title`非字符串时，可指定该属性，用于渲染在 “列设置” 中 */
+    titleText?: string;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
     children?: ColumnType<R>[];
@@ -26,7 +28,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
      */
     sorter?: boolean | ((a: R, b: R) => number);
     /**
-     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProps.onFilterClick}实现筛选逻辑
+     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProp['onFilterClick']}实现筛选逻辑
      * @enum FilterOptionsProps 传递至`OptionsBase`组件
      * @example FilterOptionsProps
      * {

package/dist/cjs/components/dataGrid/dataGridHead.js

@@ -82,7 +82,7 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                 }
                 const { 
                 // 排除无需加入dom节点的属性
-                title, key, children, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
+                title, titleText, key, children, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
                 const sortable = sorter && !children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';

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

@@ -56,7 +56,7 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
                 // 排除无需加入dom节点的属性
                 // width属性只需加入thead列中，普通列需排除
                 // rowSpan与colSpan需排除
-                title, key, children, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                title, titleText, key, children, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
                 const renderedContent = (0, utils_1.renderCell)({ render, field }, row, i, arr);
                 const shouldRenderExpand = expandableIndex === j - 1;
                 return ((0, react_1.createElement)(table_1.TdCell, { ..._colProps, key: _key, className: (0, utils_1.clsx)(_colProps.className, shouldRenderExpand && dataGrid_style_1.classes.expandable) }, shouldRenderExpand

package/dist/cjs/components/sortableItem/sortableItem.d.ts

@@ -5,6 +5,7 @@ export type SortableItemOwnProps = {
     id: Id;
     disabled?: boolean;
     sortableArguments?: Arguments;
+    noStyle?: boolean;
 };
 export type SortableItemProps<C extends ElementType = 'div'> = OverridableProps<SortableItemOwnProps, C>;
 export declare const SortableItem: OverridableComponent<SortableItemOwnProps>;

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -8,7 +8,7 @@ const utilities_1 = require("@dnd-kit/utilities");
 const utils_1 = require("../../utils");
 const react_2 = require("@emotion/react");
 const sortableItem_style_1 = require("./sortableItem.style");
-exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
+exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, noStyle, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
         ...sortableArguments,
         disabled,
@@ -36,5 +36,5 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
                     transform: utilities_1.CSS.Transform.toString(transform),
                     transition,
                     ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-draggable": !disabled }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-no-style": noStyle, "data-dragging": isDragging, "data-draggable": !disabled }), !noStyle && isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
 });

package/dist/cjs/components/sortableItem/sortableItem.style.js

@@ -5,11 +5,15 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('sortable-item');
 exports.style = (0, react_1.css) `
-    &[data-draggable=true] {
-        cursor: grab;
+    @layer reset {
+        &:not([data-no-style=true]) {
+            &[data-draggable=true] {
+                cursor: grab;
 
-        &:active {
-            cursor: grabbing;
+                &:active {
+                    cursor: grabbing;
+                }
+            }
         }
     }
 `;

package/dist/cjs/utils/keyboard.js

@@ -84,7 +84,7 @@ function useEscapeClosable({ escapeClosable, close }, onEscape) {
         if (escapeClosable) {
             const keydown = (e) => {
                 if (e.key === 'Escape') {
-                    const { nextSibling } = overlayRef.current;
+                    const nextSibling = overlayRef.current?.nextSibling;
                     if (!nextSibling || nextSibling.dataset.open !== 'true') {
                         // 后面无元素，或后一个元素已关闭，才能关闭当前
                         e.preventDefault();

package/dist/esm/components/curd/curdColumnConfig.d.ts

@@ -2,11 +2,10 @@ import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { CurdColumn } from './curd';
 import { RowType } from '../dataGrid';
 import { Id } from '../../types';
-type CurdColumnConfigProps<R extends RowType> = {
+export type CurdColumnConfigProps<R extends RowType> = {
     columns?: CurdColumn<R>[];
     innerVisible: Id[];
     setInnerVisible: Dispatch<SetStateAction<Id[]>>;
     setInnerOrder: Dispatch<SetStateAction<Id[]>>;
 };
 export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;
-export {};

package/dist/esm/components/curd/curdColumnConfig.js

@@ -11,7 +11,7 @@ import { SortableContext } from '@dnd-kit/sortable';
 import { isUnset, onDndDragEnd, useDndSensors } from '../../utils';
 import { Icon } from '../icon';
 import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
-export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible, setInnerOrder, }) => {
+export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible, setInnerOrder }) => {
     columns ||= [];
     const dragEndHandler = (e) => {
         const newColumns = onDndDragEnd(e, columns, '_key');
@@ -21,9 +21,16 @@ export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible,
         return new Set(innerVisible);
     }, [innerVisible]);
     const toggleVisible = (key, checked) => {
-        setInnerVisible(o => checked
+        !isUnset(key) && setInnerVisible(o => checked
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
+    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+                            const id = col._key;
+                            const checked = !isUnset(id) && visibleSet.has(id);
+                            return (_jsx(SortableItem, { id: id ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: checked, onChange: e => {
+                                        e.stopPropagation();
+                                        toggleVisible(id, e.target.checked);
+                                    } }), onClick: () => toggleVisible(id, !checked), label: col.titleText ?? col.title, noStyle: true }, id ?? i));
+                        })] }) }) }), autoClose: false, children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
 });

package/dist/esm/components/curd/curdColumnConfig.style.js

@@ -29,8 +29,8 @@ export const style = defineCss(({ spacing, text }) => css `
             }
 
             .${classes.item} {
-                cursor: move;
-
+                    cursor: pointer;
+                
                 &[data-dragging=true] {
                     position: relative;
                     z-index: 1;

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

@@ -12,6 +12,8 @@ import { BubbleProps } from '../bubble';
 export type RowType = Obj;
 export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
+    /** 当`title`非字符串时，可指定该属性，用于渲染在 “列设置” 中 */
+    titleText?: string;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
     children?: ColumnType<R>[];
@@ -26,7 +28,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
      */
     sorter?: boolean | ((a: R, b: R) => number);
     /**
-     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProps.onFilterClick}实现筛选逻辑
+     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProp['onFilterClick']}实现筛选逻辑
      * @enum FilterOptionsProps 传递至`OptionsBase`组件
      * @example FilterOptionsProps
      * {

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

@@ -79,7 +79,7 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
                 }
                 const { 
                 // 排除无需加入dom节点的属性
-                title, key, children, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
+                title, titleText, key, children, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
                 const sortable = sorter && !children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';

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

@@ -53,7 +53,7 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
                 // 排除无需加入dom节点的属性
                 // width属性只需加入thead列中，普通列需排除
                 // rowSpan与colSpan需排除
-                title, key, children, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                title, titleText, key, children, 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: clsx(_colProps.className, shouldRenderExpand && classes.expandable) }, shouldRenderExpand

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

@@ -5,6 +5,7 @@ export type SortableItemOwnProps = {
     id: Id;
     disabled?: boolean;
     sortableArguments?: Arguments;
+    noStyle?: boolean;
 };
 export type SortableItemProps<C extends ElementType = 'div'> = OverridableProps<SortableItemOwnProps, C>;
 export declare const SortableItem: OverridableComponent<SortableItemOwnProps>;

package/dist/esm/components/sortableItem/sortableItem.js

@@ -5,7 +5,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { cloneRef, clsx, useSync } from '../../utils';
 import { Global } from '@emotion/react';
 import { classes, globalGrabbingStyle, style } from './sortableItem.style';
-export const SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
+export const SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, noStyle, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         ...sortableArguments,
         disabled,
@@ -33,5 +33,5 @@ export const SortableItem = (({ component: Component = 'div', id, disabled, sort
                     transform: CSS.Transform.toString(transform),
                     transition,
                     ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-draggable": !disabled }), isDragging && _jsx(Global, { styles: globalGrabbingStyle })] }));
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-no-style": noStyle, "data-dragging": isDragging, "data-draggable": !disabled }), !noStyle && isDragging && _jsx(Global, { styles: globalGrabbingStyle })] }));
 });

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

@@ -2,11 +2,15 @@ import { css } from '@emotion/react';
 import { defineInnerClasses } from '../../utils';
 export const classes = defineInnerClasses('sortable-item');
 export const style = css `
-    &[data-draggable=true] {
-        cursor: grab;
+    @layer reset {
+        &:not([data-no-style=true]) {
+            &[data-draggable=true] {
+                cursor: grab;
 
-        &:active {
-            cursor: grabbing;
+                &:active {
+                    cursor: grabbing;
+                }
+            }
         }
     }
 `;

package/dist/esm/utils/keyboard.js

@@ -80,7 +80,7 @@ export function useEscapeClosable({ escapeClosable, close }, onEscape) {
         if (escapeClosable) {
             const keydown = (e) => {
                 if (e.key === 'Escape') {
-                    const { nextSibling } = overlayRef.current;
+                    const nextSibling = overlayRef.current?.nextSibling;
                     if (!nextSibling || nextSibling.dataset.open !== 'true') {
                         // 后面无元素，或后一个元素已关闭，才能关闭当前
                         e.preventDefault();

package/package.json

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