@canlooks/can-ui 0.0.195 → 0.0.196

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/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/package.json

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