@canlooks/can-ui 0.0.27 → 0.0.29

package/dist/cjs/components/actionSheet/actionSheet.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionSheet = void 0;
+const react_1 = require("@emotion/react");
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_2 = require("react");
 const actionSheet_style_1 = require("./actionSheet.style");
 const utils_1 = require("../../utils");
 const overlayBase_1 = require("../overlayBase");
@@ -12,7 +13,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-exports.ActionSheet = (0, react_1.memo)(({ ref, title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
+exports.ActionSheet = (0, react_2.memo)(({ ref, title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -34,10 +35,10 @@ exports.ActionSheet = (0, react_1.memo)(({ ref, title, actions, placement = 'bot
                                         confirmProps?.onClick?.(e);
                                         onConfirm?.(e);
                                         close('confirmed');
-                                    } }), actions?.map((menuItemProps, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: (0, utils_1.clsx)(actionSheet_style_1.classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    } }), actions?.map((menuItemProps, i) => (0, react_1.createElement)(menuItem_1.MenuItem, { className: (0, utils_1.clsx)(actionSheet_style_1.classes.action, menuItemProps.className), size: "large", ...menuItemProps, key: menuItemProps.key ?? i, onClick: e => {
                                     menuItemProps.onClick?.(e);
                                     onAction?.(menuItemProps);
                                     close('action');
-                                } }, i))] }), showCancel &&
+                                } }))] }), showCancel &&
                     (0, jsx_runtime_1.jsx)("div", { className: actionSheet_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
 });

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

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurdFilter = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const form_1 = require("../form");
 const curd_style_1 = require("./curd.style");
 const utils_1 = require("../../utils");
@@ -13,25 +14,25 @@ const theme_1 = require("../theme");
 const __1 = require("../..");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
-exports.CurdFilter = (0, react_1.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
+exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
-    const items = (0, react_1.useMemo)(() => {
+    const items = (0, react_2.useMemo)(() => {
         return (0, utils_1.columnsToFilterItem)(columns);
     }, [columns]);
     /**
      * --------------------------------------------------------------
      * 收起与展开
      */
-    const firstItemRef = (0, react_1.useRef)(null);
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    const renderedGrid = ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: curd_style_1.classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => (0, react_1.isValidElement)(item)
+    const firstItemRef = (0, react_2.useRef)(null);
+    const [expanded, setExpanded] = (0, react_2.useState)(false);
+    const renderedGrid = ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: curd_style_1.classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => (0, react_2.isValidElement)(item)
             ? item
-            : (0, jsx_runtime_1.jsx)(form_1.FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, wrapperRef: !i ? firstItemRef : void 0 }, i)) }));
+            : (0, react_1.createElement)(form_1.FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 })) }));
     /**
      * --------------------------------------------------------------
      * 触发筛选
      */
-    const formRef = (0, react_1.useRef)(null);
+    const formRef = (0, react_2.useRef)(null);
     const clickHandler = (e) => {
         buttonProps?.onClick?.(e);
         const filterValue = formRef.current.getFormValue();
@@ -47,7 +48,7 @@ exports.CurdFilter = (0, react_1.memo)(({ ref, columns, expandable, showButton,
      * --------------------------------------------------------------
      * 已生效的筛选条件
      */
-    const [filteredConditions, setFilteredConditions] = (0, react_1.useState)({});
+    const [filteredConditions, setFilteredConditions] = (0, react_2.useState)({});
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: (0, utils_1.cloneRef)(ref, formRef), className: (0, utils_1.clsx)(curd_style_1.classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [expandable
                                 ? (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: curd_style_1.classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })

package/dist/cjs/components/descriptions/descriptions.js

@@ -3,36 +3,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Descriptions = void 0;
 exports.useDescriptionsContext = useDescriptionsContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const grid_1 = require("../grid");
 const descriptionItem_1 = require("./descriptionItem");
 const utils_1 = require("../../utils");
 const descriptions_style_1 = require("./descriptions.style");
 const theme_1 = require("../theme");
 function useDescriptionsContext() {
-    return (0, react_1.useContext)(DescriptionsContext);
+    return (0, react_2.useContext)(DescriptionsContext);
 }
-const DescriptionsContext = (0, react_1.createContext)({});
-exports.Descriptions = (0, react_1.memo)(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = descriptionItem_1.DescriptionItem, variant = 'grid', columnCount = 3, ...props }) => {
-    const contextValue = (0, react_1.useMemo)(() => ({
+const DescriptionsContext = (0, react_2.createContext)({});
+exports.Descriptions = (0, react_2.memo)(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = descriptionItem_1.DescriptionItem, variant = 'grid', columnCount = 3, ...props }) => {
+    const contextValue = (0, react_2.useMemo)(() => ({
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     }), [
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     ]);
     const renderGridItems = () => {
-        return items?.map((itemProps, i) => (0, jsx_runtime_1.jsx)(ItemComponent, { 
+        return items?.map((itemProps, i) => (0, react_1.createElement)(ItemComponent
+        // 最后一项沾满剩余行空间
+        , { 
             // 最后一项沾满剩余行空间
-            flex: i === items.length - 1 ? 1 : void 0, ...itemProps }, i)) || props.children;
+            flex: i === items.length - 1 ? 1 : void 0, ...itemProps, key: itemProps.key ?? i })) || props.children;
     };
     const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
     const renderTableItems = () => {
-        const actualItems = items || react_1.Children.map(props.children, c => (0, react_1.isValidElement)(c) ? c.props : c);
+        const actualItems = items || react_2.Children.map(props.children, c => (0, react_2.isValidElement)(c) ? c.props : c);
         if (actualItems?.length) {
             const rows = [];
             for (let i = 0, { length } = actualItems; i < length; i++) {
                 const cols = rows[Math.floor(i / columnCountNum)] ||= [];
                 const itemProps = actualItems[i];
-                cols.push((0, jsx_runtime_1.jsx)(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: (0, utils_1.clsx)(descriptions_style_1.classes.col, itemProps) }, i));
+                cols.push((0, react_1.createElement)(ItemComponent
+                // 最后一项沾满剩余行空间
+                , { ...itemProps, key: itemProps.key ?? i, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: (0, utils_1.clsx)(descriptions_style_1.classes.col, itemProps) }));
             }
             return rows.map((r, i) => (0, jsx_runtime_1.jsx)("tr", { children: r }, i));
         }

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

@@ -72,7 +72,7 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
         flex-direction: row-reverse;
     }
 
-    &:not(:last-of-type):not([data-disable-margin=true]) {
+    &:not([data-disable-margin=true]) {
         &[data-label-placement=left], &[data-label-placement=right] {
             margin-bottom: ${spacing[4]}px;
 
@@ -134,6 +134,7 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
 
     &[data-label-placement=left] {
         .${exports.classes.label} {
+            text-align: right;
             justify-content: flex-end;
         }
 

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

@@ -32,6 +32,7 @@ interface FormContext<V extends FormValue> extends FormSharedProps {
 declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
 export type FormRef<V extends FormValue = FormValue> = {
+    /** 存在校验不通过的字段时会得到`null` */
     submit(): Promise<V | null>;
     getFieldValue<T = any>(field: FieldPath): T;
     getFormValue(): V;

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

@@ -20,7 +20,7 @@ exports.style = (0, utils_1.defineCss)(({ colors, spacing }) => (0, react_1.css)
     }
 
     .${exports.classes.item} {
-        &:not(:last-of-type):not([data-disable-margin=true]) {
+        &:not([data-disable-margin=true]) {
             &[data-label-placement=left], &[data-label-placement=right] {
                 margin-bottom: ${spacing[6]}px;
 

package/dist/cjs/components/form/formItem.js

@@ -49,7 +49,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
      * --------------------------------------------------------------------
      * 校验
      */
-    const rulesArr = Array.isArray(rules) ? rules : rules && [rules];
+    const rulesArr = (0, utils_1.toArray)(rules);
     const [innerError, setInnerError] = (0, utils_1.useDerivedState)(error);
     const [innerHelperText, setInnerHelperText] = (0, utils_1.useDerivedState)(helperText);
     const validate = async () => {
@@ -167,7 +167,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRequired && !!requiredMark &&
+    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRequired && !!requiredMark &&
                     (0, jsx_runtime_1.jsx)("span", { className: form_style_1.classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerError.current || !!helperText, children: (0, jsx_runtime_1.jsx)("div", { className: form_style_1.classes.helperText, children: innerHelperText.current }) })] }));
 };
 exports.FormItem = FormItem;

package/dist/cjs/components/slider/slider.js

@@ -192,14 +192,15 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
             };
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { popperRef: r => {
+                : (0, react_1.createElement)(tooltip_1.Tooltip, { popperRef: r => {
                         if (r) {
                             tooltipRefs.current[index] = r;
                         }
                         else {
                             delete tooltipRefs.current[index];
                         }
-                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: (0, react_1.createElement)("button", { ..._handleProps, key: index }) }, index);
+                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index },
+                    (0, react_1.createElement)("button", { ..._handleProps, key: index }));
         };
         return valueIsArray
             ? innerValue.current.map(fn)

package/dist/esm/components/actionSheet/actionSheet.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, style } from './actionSheet.style';
@@ -31,10 +32,10 @@ export const ActionSheet = memo(({ ref, title, actions, placement = 'bottom', ma
                                         confirmProps?.onClick?.(e);
                                         onConfirm?.(e);
                                         close('confirmed');
-                                    } }), actions?.map((menuItemProps, i) => _jsx(MenuItem, { className: clsx(classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    } }), actions?.map((menuItemProps, i) => _createElement(MenuItem, { className: clsx(classes.action, menuItemProps.className), size: "large", ...menuItemProps, key: menuItemProps.key ?? i, onClick: e => {
                                     menuItemProps.onClick?.(e);
                                     onAction?.(menuItemProps);
                                     close('action');
-                                } }, i))] }), showCancel &&
+                                } }))] }), showCancel &&
                     _jsx("div", { className: classes.card, children: _jsx(MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
 });

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useMemo, useRef, useState } from 'react';
 import { Form, FormItem } from '../form';
 import { classes } from './curd.style';
@@ -23,7 +24,7 @@ export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderCo
     const [expanded, setExpanded] = useState(false);
     const renderedGrid = (_jsx(Grid, { className: classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => isValidElement(item)
             ? item
-            : _jsx(FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, wrapperRef: !i ? firstItemRef : void 0 }, i)) }));
+            : _createElement(FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 })) }));
     /**
      * --------------------------------------------------------------
      * 触发筛选

package/dist/esm/components/descriptions/descriptions.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { Grid } from '../grid';
 import { DescriptionItem } from './descriptionItem';
@@ -16,9 +17,11 @@ export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacemen
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     ]);
     const renderGridItems = () => {
-        return items?.map((itemProps, i) => _jsx(ItemComponent, { 
+        return items?.map((itemProps, i) => _createElement(ItemComponent
+        // 最后一项沾满剩余行空间
+        , { 
             // 最后一项沾满剩余行空间
-            flex: i === items.length - 1 ? 1 : void 0, ...itemProps }, i)) || props.children;
+            flex: i === items.length - 1 ? 1 : void 0, ...itemProps, key: itemProps.key ?? i })) || props.children;
     };
     const columnCountNum = useResponsiveValue(columnCount);
     const renderTableItems = () => {
@@ -28,7 +31,9 @@ export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacemen
             for (let i = 0, { length } = actualItems; i < length; i++) {
                 const cols = rows[Math.floor(i / columnCountNum)] ||= [];
                 const itemProps = actualItems[i];
-                cols.push(_jsx(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: clsx(classes.col, itemProps) }, i));
+                cols.push(_createElement(ItemComponent
+                // 最后一项沾满剩余行空间
+                , { ...itemProps, key: itemProps.key ?? i, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: clsx(classes.col, itemProps) }));
             }
             return rows.map((r, i) => _jsx("tr", { children: r }, i));
         }

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

@@ -69,7 +69,7 @@ export const gridItemStyle = defineCss(({ spacing, text }) => css `
         flex-direction: row-reverse;
     }
 
-    &:not(:last-of-type):not([data-disable-margin=true]) {
+    &:not([data-disable-margin=true]) {
         &[data-label-placement=left], &[data-label-placement=right] {
             margin-bottom: ${spacing[4]}px;
 
@@ -131,6 +131,7 @@ export const gridItemStyle = defineCss(({ spacing, text }) => css `
 
     &[data-label-placement=left] {
         .${classes.label} {
+            text-align: right;
             justify-content: flex-end;
         }
 

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

@@ -32,6 +32,7 @@ interface FormContext<V extends FormValue> extends FormSharedProps {
 declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
 export type FormRef<V extends FormValue = FormValue> = {
+    /** 存在校验不通过的字段时会得到`null` */
     submit(): Promise<V | null>;
     getFieldValue<T = any>(field: FieldPath): T;
     getFormValue(): V;

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

@@ -17,7 +17,7 @@ export const style = defineCss(({ colors, spacing }) => css `
     }
 
     .${classes.item} {
-        &:not(:last-of-type):not([data-disable-margin=true]) {
+        &:not([data-disable-margin=true]) {
             &[data-label-placement=left], &[data-label-placement=right] {
                 margin-bottom: ${spacing[6]}px;
 

package/dist/esm/components/form/formItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useFormContext } from './form';
-import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState } from '../../utils';
+import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
@@ -46,7 +46,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
      * --------------------------------------------------------------------
      * 校验
      */
-    const rulesArr = Array.isArray(rules) ? rules : rules && [rules];
+    const rulesArr = toArray(rules);
     const [innerError, setInnerError] = useDerivedState(error);
     const [innerHelperText, setInnerHelperText] = useDerivedState(helperText);
     const validate = async () => {
@@ -164,6 +164,6 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return (_jsxs(DescriptionItem, { ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: _jsxs(_Fragment, { children: [isRequired && !!requiredMark &&
+    return (_jsxs(DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: _jsxs(_Fragment, { children: [isRequired && !!requiredMark &&
                     _jsx("span", { className: classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, _jsx(Collapse, { in: innerError.current || !!helperText, children: _jsx("div", { className: classes.helperText, children: innerHelperText.current }) })] }));
 };

package/dist/esm/components/slider/slider.js

@@ -189,14 +189,15 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
             };
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : _jsx(Tooltip, { popperRef: r => {
+                : _createElement(Tooltip, { popperRef: r => {
                         if (r) {
                             tooltipRefs.current[index] = r;
                         }
                         else {
                             delete tooltipRefs.current[index];
                         }
-                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: _createElement("button", { ..._handleProps, key: index }) }, index);
+                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index },
+                    _createElement("button", { ..._handleProps, key: index }));
         };
         return valueIsArray
             ? innerValue.current.map(fn)