@canlooks/can-ui 0.0.28 → 0.0.30

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

@@ -12,7 +12,7 @@ const appStyleCallback = (theme) => (0, react_1.css) `
     color-scheme: ${theme.mode};
     zoom: ${theme.zoom};
 
-    * {
+    *, *:before, *:after {
         box-sizing: border-box;
         font-family: ${theme.fontFamily};
     }

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;
 

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/progress/progress.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps } from '../../types';
 export interface ProgressProps extends DivProps {
     showInfo?: boolean;
+    renderInfo?(value?: number): ReactNode;
     color?: ColorPropsValue;
     status?: 'default' | 'processing' | 'success' | 'error';
     variant?: 'linear' | 'circular' | 'gauge';
@@ -20,4 +21,4 @@ export interface ProgressProps extends DivProps {
     strokeLinecap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
     value?: number;
 }
-export declare const Progress: React.MemoExoticComponent<({ showInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Progress: React.MemoExoticComponent<({ showInfo, renderInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/progress/progress.js

@@ -10,10 +10,13 @@ const react_2 = require("@emotion/react");
 const __1 = require("../..");
 const faCircleCheck_1 = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
 const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
-exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
+exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
     const { colors: { success, error } } = (0, theme_1.useTheme)();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
-    const renderInfo = () => {
+    const renderInfoFn = () => {
+        if (renderInfo) {
+            return renderInfo(value);
+        }
         if (isSucceed) {
             return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleCheck_1.faCircleCheck, className: progress_style_1.classes.icon, style: { color: success.main } });
         }
@@ -35,19 +38,19 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', stat
         if (variant === 'circular' && indeterminate) {
             const dasharray = commonCircleProps.r * 10;
             const anim = (0, react_2.keyframes) `
-                    0% {
-                        stroke-dasharray: 1px ${dasharray}px;
-                        stroke-dashoffset: 0;
-                    }
-                    50% {
-                        stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
-                        stroke-dashoffset: -${dasharray / 2 * .15}px;
-                    }
-                    100% {
-                        stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
-                        stroke-dashoffset: -${dasharray / 2 * 1.25}px;
-                    }
-                `;
+                0% {
+                    stroke-dasharray: 1px ${dasharray}px;
+                    stroke-dashoffset: 0;
+                }
+                50% {
+                    stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
+                    stroke-dashoffset: -${dasharray / 2 * .15}px;
+                }
+                100% {
+                    stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
+                    stroke-dashoffset: -${dasharray / 2 * 1.25}px;
+                }
+            `;
             return (0, react_2.css)({ animation: `${anim} 1.4s linear infinite` });
         }
         return;
@@ -59,7 +62,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', stat
                         }, children: (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.bar, style: indeterminate
                                 ? void 0
                                 : { width: value + '%' } }) }), showInfo && !indeterminate &&
-                        (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfo() })] })
+                        (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfoFn() })] })
             : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: progress_style_1.classes.svg, width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: {
                             transform: variant === 'gauge'
                                 ? `rotate(${90 + gapDegree / 2}deg)`
@@ -67,5 +70,5 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', stat
                         }, children: [(0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, className: progress_style_1.classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), (0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: progress_style_1.classes.bar, strokeDasharray: strokeDasharray, strokeDashoffset: variant === 'circular'
                                     ? strokeDasharray * (1 - value / 100)
                                     : strokeDasharray * (1 - Math.max(0, Math.min(100, value)) / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
-                        (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfo() })] }) }));
+                        (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfoFn() })] }) }));
 });

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

@@ -9,7 +9,7 @@ export const appStyleCallback = (theme) => css `
     color-scheme: ${theme.mode};
     zoom: ${theme.zoom};
 
-    * {
+    *, *:before, *:after {
         box-sizing: border-box;
         font-family: ${theme.fontFamily};
     }

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;
 

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/progress/progress.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps } from '../../types';
 export interface ProgressProps extends DivProps {
     showInfo?: boolean;
+    renderInfo?(value?: number): ReactNode;
     color?: ColorPropsValue;
     status?: 'default' | 'processing' | 'success' | 'error';
     variant?: 'linear' | 'circular' | 'gauge';
@@ -20,4 +21,4 @@ export interface ProgressProps extends DivProps {
     strokeLinecap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
     value?: number;
 }
-export declare const Progress: React.MemoExoticComponent<({ showInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Progress: React.MemoExoticComponent<({ showInfo, renderInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/progress/progress.js

@@ -7,10 +7,13 @@ import { css, keyframes } from '@emotion/react';
 import { Icon } from '../..';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
-export const Progress = memo(({ showInfo = true, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
+export const Progress = memo(({ showInfo = true, renderInfo, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
     const { colors: { success, error } } = useTheme();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
-    const renderInfo = () => {
+    const renderInfoFn = () => {
+        if (renderInfo) {
+            return renderInfo(value);
+        }
         if (isSucceed) {
             return _jsx(Icon, { icon: faCircleCheck, className: classes.icon, style: { color: success.main } });
         }
@@ -32,19 +35,19 @@ export const Progress = memo(({ showInfo = true, color = 'primary', status = 'de
         if (variant === 'circular' && indeterminate) {
             const dasharray = commonCircleProps.r * 10;
             const anim = keyframes `
-                    0% {
-                        stroke-dasharray: 1px ${dasharray}px;
-                        stroke-dashoffset: 0;
-                    }
-                    50% {
-                        stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
-                        stroke-dashoffset: -${dasharray / 2 * .15}px;
-                    }
-                    100% {
-                        stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
-                        stroke-dashoffset: -${dasharray / 2 * 1.25}px;
-                    }
-                `;
+                0% {
+                    stroke-dasharray: 1px ${dasharray}px;
+                    stroke-dashoffset: 0;
+                }
+                50% {
+                    stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
+                    stroke-dashoffset: -${dasharray / 2 * .15}px;
+                }
+                100% {
+                    stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
+                    stroke-dashoffset: -${dasharray / 2 * 1.25}px;
+                }
+            `;
             return css({ animation: `${anim} 1.4s linear infinite` });
         }
         return;
@@ -56,7 +59,7 @@ export const Progress = memo(({ showInfo = true, color = 'primary', status = 'de
                         }, children: _jsx("div", { className: classes.bar, style: indeterminate
                                 ? void 0
                                 : { width: value + '%' } }) }), showInfo && !indeterminate &&
-                        _jsx("div", { className: classes.info, children: renderInfo() })] })
+                        _jsx("div", { className: classes.info, children: renderInfoFn() })] })
             : _jsxs(_Fragment, { children: [_jsxs("svg", { className: classes.svg, width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: {
                             transform: variant === 'gauge'
                                 ? `rotate(${90 + gapDegree / 2}deg)`
@@ -64,5 +67,5 @@ export const Progress = memo(({ showInfo = true, color = 'primary', status = 'de
                         }, children: [_jsx("circle", { ...commonCircleProps, className: classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), _jsx("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: classes.bar, strokeDasharray: strokeDasharray, strokeDashoffset: variant === 'circular'
                                     ? strokeDasharray * (1 - value / 100)
                                     : strokeDasharray * (1 - Math.max(0, Math.min(100, value)) / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
-                        _jsx("div", { className: classes.info, children: renderInfo() })] }) }));
+                        _jsx("div", { className: classes.info, children: renderInfoFn() })] }) }));
 });