@canlooks/can-ui 0.0.46 → 0.0.48

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

@@ -142,7 +142,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
     onChange: import("react").FormEventHandler<HTMLDivElement>;
     onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onBeforeInput: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInput: import("react").InputEventHandler<HTMLDivElement>;
     onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
     onInput: import("react").FormEventHandler<HTMLDivElement>;
     onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
@@ -192,8 +192,6 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     onProgressCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onRateChange: import("react").ReactEventHandler<HTMLDivElement>;
     onRateChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
-    onResize: import("react").ReactEventHandler<HTMLDivElement>;
-    onResizeCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onSeeked: import("react").ReactEventHandler<HTMLDivElement>;
     onSeekedCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onSeeking: import("react").ReactEventHandler<HTMLDivElement>;

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

@@ -19,7 +19,7 @@ size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = {
     const spanNum = useResponsiveValue(span, variant === 'grid');
     return variant === 'grid'
         ? _jsxs(GridItem, { ...props, css: gridItemStyle, className: clsx(classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
-                    _jsxs("div", { className: classes.label, style: { width: labelWidth }, children: [label, !!colon && (labelPlacement === 'left' || labelPlacement === 'right') &&
+                    _jsxs("div", { className: classes.label, style: { width: labelWidth }, children: [label, !!colon && labelPlacement === 'left' &&
                                 _jsx("div", { className: classes.colon, children: colon })] }), _jsx("div", { className: classes.content, children: content ?? props.children })] })
         : labelPlacement === 'top'
             ? _jsx("td", { className: classes.vertical, colSpan: spanNum.current, children: _jsxs("div", { className: classes.verticalColWrap, children: [_jsx("div", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("div", { className: `${classes.col} ${classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] }) })

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

@@ -133,18 +133,21 @@ export const gridItemStyle = defineCss(({ spacing, text }) => css `
         .${classes.label} {
             text-align: right;
             justify-content: flex-end;
-        }
-
-        .${classes.content} {
-            margin-left: ${spacing[3]}px;
+            
+            + .${classes.content} {
+                margin-left: ${spacing[3]}px;
+            }
         }
     }
 
     &[data-label-placement=right] {
         .${classes.content} {
             text-align: right;
-            margin-right: ${spacing[2]}px;
             justify-content: flex-end;
         }
+
+        .${classes.label} + .${classes.content} {
+            margin-right: ${spacing[3]}px;
+        }
     }
 `);

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

@@ -39,6 +39,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
      */
     const itemsContainer = useRef(new Map());
     const submitHandler = async (e) => {
+        console.log(e);
         e?.preventDefault();
         try {
             await Promise.all([...itemsContainer.current].map(async ([, item]) => {

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

@@ -156,6 +156,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    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 }) })] }));
+    return (_jsxs(DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: !!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/inputBase/inputBase.js

@@ -9,7 +9,7 @@ import { Icon } from '../..';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 export const InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
 // 以下属性传递给<input/>
-min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
+min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const innerInputRef = useRef(null);

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

@@ -23,6 +23,7 @@ export function useStyle({ color }) {
         const c = Color(colorValue);
         const selectedBg = c.alpha(.1).string();
         const selectedAndFocused = c.alpha(.15).string();
+        const selectedActive = c.alpha(.08).string();
         const focusedBg = gray(mode === 'light' ? .05 : .23);
         const disabledOrActive = gray(mode === 'light' ? .1 : .17);
         return css `
@@ -33,6 +34,7 @@ export function useStyle({ color }) {
             cursor: pointer;
             color: ${text.primary};
             padding: ${paddingHorizontal.medium}px 12px;
+            position: relative;
             -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
@@ -47,8 +49,7 @@ export function useStyle({ color }) {
         
             transition: background-color .25s ${easing.easeOut};
         
-            &:hover,
-            &[data-focused=true] {
+            &:hover, &[data-focused=true] {
                 background-color: ${focusedBg};
             }
 
@@ -64,7 +65,7 @@ export function useStyle({ color }) {
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
-                &[data-focused=true] {
+                &:hover, &[data-focused=true] {
                     background-color: ${selectedAndFocused};
                 }
 
@@ -72,6 +73,10 @@ export function useStyle({ color }) {
                     font-weight: bold;
                     color: ${colorValue};
                 }
+                
+                &:active {
+                    background-color: ${selectedActive};
+                }
             }
 
             &[data-disabled=true] {

package/dist/esm/components/touchRipple/touchRipple.js

@@ -17,10 +17,6 @@ export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
     useLayoutEffect(() => {
         const wrapper = rippleRef.current?.parentElement;
         if (wrapper) {
-            const { position } = getComputedStyle(wrapper);
-            if (position === 'static') {
-                wrapper.style.position = 'relative';
-            }
             const pointerDown = (e) => {
                 setRipples(o => [
                     ...o,