@canlooks/can-ui 0.0.46 → 0.0.48

package/dist/cjs/components/button/button.js

@@ -27,7 +27,7 @@ const Button = ({ component: Component = 'button', color = 'primary', shape = 's
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
     const reverseTextColor = variant === 'filled' || variant === 'flatted' ? '#ffffff' : color;
-    return ((0, jsx_runtime_1.jsxs)(Component, { ...props, css: (0, button_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_2.clsx)(button_style_1.classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
+    return ((0, jsx_runtime_1.jsxs)(Component, { type: "button", ...props, css: (0, button_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_2.clsx)(button_style_1.classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
                 ? actualPrefix
                     ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor })
                     : (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { orientation: "horizontal", in: true, children: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor }) })

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

@@ -16,128 +16,128 @@ exports.classes = (0, utils_1.defineInnerClasses)('calendar', [
     'yearItem',
     'foot'
 ]);
-exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
-    .${exports.classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuItem_style_1.menuListPadding}px;
-        position: relative;
-
-        .${exports.classes.headSide} {
-            z-index: 1;
-        }
-
-        .${exports.classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${exports.classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${exports.classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${exports.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);
-
-            .${exports.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);
-
-            .${exports.classes.monthItem},
-            .${exports.classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${exports.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);
-
-                .${exports.classes.monthItem},
-                .${exports.classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${exports.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);
-            }
-        }
-    }
-
-    .${exports.classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
+    .${exports.classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuItem_style_1.menuListPadding}px;
+        position: relative;
+
+        .${exports.classes.headSide} {
+            z-index: 1;
+        }
+
+        .${exports.classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${exports.classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${exports.classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${exports.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);
+
+            .${exports.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);
+
+            .${exports.classes.monthItem},
+            .${exports.classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${exports.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);
+
+                .${exports.classes.monthItem},
+                .${exports.classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${exports.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);
+            }
+        }
+    }
+
+    .${exports.classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

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

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

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

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

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

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

@@ -159,7 +159,8 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    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 }) })] }));
+    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: !!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/inputBase/inputBase.js

@@ -12,7 +12,7 @@ const __1 = require("../..");
 const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
 exports.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 = (0, theme_1.useTheme)();
     size ??= theme.size;
     const innerInputRef = (0, react_1.useRef)(null);

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

@@ -28,6 +28,7 @@ function useStyle({ color }) {
         const c = (0, color_1.default)(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 (0, react_1.css) `
@@ -38,6 +39,7 @@ function useStyle({ color }) {
             cursor: pointer;
             color: ${text.primary};
             padding: ${exports.paddingHorizontal.medium}px 12px;
+            position: relative;
             -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
@@ -52,8 +54,7 @@ function useStyle({ color }) {
         
             transition: background-color .25s ${easing.easeOut};
         
-            &:hover,
-            &[data-focused=true] {
+            &:hover, &[data-focused=true] {
                 background-color: ${focusedBg};
             }
 
@@ -69,7 +70,7 @@ function useStyle({ color }) {
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
-                &[data-focused=true] {
+                &:hover, &[data-focused=true] {
                     background-color: ${selectedAndFocused};
                 }
 
@@ -77,6 +78,10 @@ function useStyle({ color }) {
                     font-weight: bold;
                     color: ${colorValue};
                 }
+                
+                &:active {
+                    background-color: ${selectedActive};
+                }
             }
 
             &[data-disabled=true] {

package/dist/cjs/components/touchRipple/touchRipple.js

@@ -20,10 +20,6 @@ exports.Ripple = (0, react_1.memo)(({ ref, color = 'primary', ...props }) => {
     (0, react_1.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,

package/dist/esm/components/button/button.js

@@ -24,7 +24,7 @@ export const Button = ({ component: Component = 'button', color = 'primary', sha
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
     const reverseTextColor = variant === 'filled' || variant === 'flatted' ? '#ffffff' : color;
-    return (_jsxs(Component, { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
+    return (_jsxs(Component, { type: "button", ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
                 ? actualPrefix
                     ? _jsx(LoadingIndicator, { color: reverseTextColor })
                     : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: reverseTextColor }) })