@canlooks/can-ui 0.0.195 → 0.0.197

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

@@ -14,5 +14,7 @@ export interface CounterProps extends Omit<FlexProps, 'defaultValue' | 'onChange
     decreaseProps?: ButtonProps;
     increaseProps?: ButtonProps;
     inputProps?: InputProps;
+    readOnly?: boolean;
+    disabled?: boolean;
 }
-export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, readOnly, disabled, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/counter/counter.js

@@ -11,7 +11,7 @@ const flex_1 = require("../flex");
 const icon_1 = require("../icon");
 const faMinus_1 = require("@fortawesome/free-solid-svg-icons/faMinus");
 const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
-exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
+exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, readOnly, disabled, ...props }) => {
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const commonButtonProps = {
         size,
@@ -21,13 +21,13 @@ exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, st
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.clsx)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...(0, utils_1.mergeComponentProps)(commonButtonProps, decreaseProps, {
+    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.clsx)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { readOnly: readOnly, disabled: disabled || innerValue.current <= min, ...(0, utils_1.mergeComponentProps)(commonButtonProps, decreaseProps, {
                     onClick: () => clickHandler(-1)
-                }), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinus_1.faMinus }) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...(0, utils_1.mergeComponentProps)(inputProps, {
+                }), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinus_1.faMinus }) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, readOnly: readOnly, disabled: disabled, ...(0, utils_1.mergeComponentProps)(inputProps, {
                     className: counter_style_1.classes.input,
                     value: innerValue.current,
                     onChange: e => setInnerValue(+e.target.value)
-                }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current >= max, ...(0, utils_1.mergeComponentProps)(commonButtonProps, increaseProps, {
+                }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { readOnly: readOnly, disabled: disabled || innerValue.current >= max, ...(0, utils_1.mergeComponentProps)(commonButtonProps, increaseProps, {
                     onClick: () => clickHandler(1)
                 }), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }) })] }));
 });

package/dist/cjs/components/pagination/counter.js

@@ -8,7 +8,7 @@ const pagination_style_1 = require("./pagination.style");
 const pagination_1 = require("./pagination");
 exports.PaginationCounter = (0, react_1.memo)((props) => {
     const { total, page, pageSize } = (0, pagination_1.usePaginationContext)();
-    const start = (page - 1) * pageSize + 1;
+    const start = Math.min((page - 1) * pageSize + 1, total);
     const end = Math.min(start + pageSize - 1, total);
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
 });

package/dist/cjs/components/pagination/pagination.js

@@ -15,9 +15,11 @@ const PaginationContext = (0, react_1.createContext)({
     total: 0,
     pageCount: 1,
     page: 1,
-    onPageChange(page) { },
+    onPageChange(page) {
+    },
     pageSize: 10,
-    onPageSizeChange(pageSize) { }
+    onPageSizeChange(pageSize) {
+    }
 });
 function usePaginationContext() {
     return (0, react_1.useContext)(PaginationContext);

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

@@ -1,7 +1,7 @@
 import { Dispatch, ReactElement, ReactNode, SetStateAction, ComponentProps } from 'react';
 import { DivProps } from '../../types';
 import { ButtonProps } from '../button';
-import { DropArea } from './dropArea';
+import { DropArea, DropAreaProps } from './dropArea';
 export type UploadStatus = 'default' | 'uploading' | 'success' | 'error';
 export interface UploadFile<R = any, A extends any[] = any[]> extends File {
     id: string;
@@ -31,6 +31,7 @@ export interface UploadProps<R = any, A extends any[] = any[]> extends UploadSha
     size?: number;
     /** 是否支持“将文件拖拽到此处” */
     droppable?: boolean;
+    dropAreaProps?: DropAreaProps;
     sortable?: boolean;
     defaultValue?: UploadFile<R, A>[];
     value?: UploadFile<R, A>[];

package/dist/cjs/components/upload/upload.js

@@ -23,7 +23,7 @@ const markFileId = (files) => {
         }
     }
 };
-exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue, value, onChange, onUpload, ...props }) => {
+exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, dropAreaProps, defaultValue, value, onChange, onUpload, ...props }) => {
     const wrapperRef = (0, react_1.useRef)(null);
     const itemRefs = (0, react_1.useRef)(new Map());
     (0, react_1.useImperativeHandle)(props.ref, () => {
@@ -99,7 +99,10 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
                     onChange: inputChangeHandler
                 }), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: type === 'file'
                     ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
-                                ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { ...(0, utils_1.mergeComponentProps)(dropAreaProps, {
+                                        onClick: () => innerInputRef.current.click(),
+                                        onDrop: changeFn
+                                    }) })
                                 : showButton &&
                                     (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faUpload_1.faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map((file, index) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortableItem, id: file.id, index: index, disabled: !sortable, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
                                             r

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

@@ -14,5 +14,7 @@ export interface CounterProps extends Omit<FlexProps, 'defaultValue' | 'onChange
     decreaseProps?: ButtonProps;
     increaseProps?: ButtonProps;
     inputProps?: InputProps;
+    readOnly?: boolean;
+    disabled?: boolean;
 }
-export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, readOnly, disabled, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/counter/counter.js

@@ -8,7 +8,7 @@ import { Flex } from '../flex/index.js';
 import { Icon } from '../icon/index.js';
 import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
-export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
+export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, readOnly, disabled, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const commonButtonProps = {
         size,
@@ -18,13 +18,13 @@ export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1,
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return (_jsxs(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...mergeComponentProps(commonButtonProps, decreaseProps, {
+    return (_jsxs(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(Button, { readOnly: readOnly, disabled: disabled || innerValue.current <= min, ...mergeComponentProps(commonButtonProps, decreaseProps, {
                     onClick: () => clickHandler(-1)
-                }), children: _jsx(Icon, { icon: faMinus }) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...mergeComponentProps(inputProps, {
+                }), children: _jsx(Icon, { icon: faMinus }) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, readOnly: readOnly, disabled: disabled, ...mergeComponentProps(inputProps, {
                     className: classes.input,
                     value: innerValue.current,
                     onChange: e => setInnerValue(+e.target.value)
-                }) }), _jsx(Button, { disabled: innerValue.current >= max, ...mergeComponentProps(commonButtonProps, increaseProps, {
+                }) }), _jsx(Button, { readOnly: readOnly, disabled: disabled || innerValue.current >= max, ...mergeComponentProps(commonButtonProps, increaseProps, {
                     onClick: () => clickHandler(1)
                 }), children: _jsx(Icon, { icon: faPlus }) })] }));
 });

package/dist/esm/components/pagination/counter.js

@@ -5,7 +5,7 @@ import { classes } from './pagination.style.js';
 import { usePaginationContext } from './pagination.js';
 export const PaginationCounter = memo((props) => {
     const { total, page, pageSize } = usePaginationContext();
-    const start = (page - 1) * pageSize + 1;
+    const start = Math.min((page - 1) * pageSize + 1, total);
     const end = Math.min(start + pageSize - 1, total);
     return (_jsxs("div", { ...props, className: clsx(classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
 });

package/dist/esm/components/pagination/pagination.js

@@ -11,9 +11,11 @@ const PaginationContext = createContext({
     total: 0,
     pageCount: 1,
     page: 1,
-    onPageChange(page) { },
+    onPageChange(page) {
+    },
     pageSize: 10,
-    onPageSizeChange(pageSize) { }
+    onPageSizeChange(pageSize) {
+    }
 });
 export function usePaginationContext() {
     return useContext(PaginationContext);

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

@@ -1,7 +1,7 @@
 import { Dispatch, ReactElement, ReactNode, SetStateAction, ComponentProps } from 'react';
 import { DivProps } from '../../types.js';
 import { ButtonProps } from '../button/index.js';
-import { DropArea } from './dropArea.js';
+import { DropArea, DropAreaProps } from './dropArea.js';
 export type UploadStatus = 'default' | 'uploading' | 'success' | 'error';
 export interface UploadFile<R = any, A extends any[] = any[]> extends File {
     id: string;
@@ -31,6 +31,7 @@ export interface UploadProps<R = any, A extends any[] = any[]> extends UploadSha
     size?: number;
     /** 是否支持“将文件拖拽到此处” */
     droppable?: boolean;
+    dropAreaProps?: DropAreaProps;
     sortable?: boolean;
     defaultValue?: UploadFile<R, A>[];
     value?: UploadFile<R, A>[];

package/dist/esm/components/upload/upload.js

@@ -20,7 +20,7 @@ const markFileId = (files) => {
         }
     }
 };
-export const Upload = memo(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue, value, onChange, onUpload, ...props }) => {
+export const Upload = memo(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, dropAreaProps, defaultValue, value, onChange, onUpload, ...props }) => {
     const wrapperRef = useRef(null);
     const itemRefs = useRef(new Map());
     useImperativeHandle(props.ref, () => {
@@ -96,7 +96,10 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
                     onChange: inputChangeHandler
                 }), "data-hidden": "true" }), _jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: type === 'file'
                     ? _jsxs(_Fragment, { children: [droppable
-                                ? _jsx(DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                ? _jsx(DropArea, { ...mergeComponentProps(dropAreaProps, {
+                                        onClick: () => innerInputRef.current.click(),
+                                        onDrop: changeFn
+                                    }) })
                                 : showButton &&
                                     _jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map((file, index) => _jsx(SortableItem, { component: Collapse, className: classes.sortableItem, id: file.id, index: index, disabled: !sortable, children: _jsx(FileItem, { ref: r => {
                                             r

package/package.json

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