@pointcloud/pcloud-components 0.1.11 → 0.1.12

package/dist/esm/AdvancedFilter/FormFilter.js

@@ -44,6 +44,21 @@ export default (function (props) {
       form: form
     };
   });
+  var formatTime = function formatTime(v) {
+    var fieldName = Object.keys(v)[0];
+    var config = formItemConfig.find(function (item) {
+      return item.name === fieldName;
+    });
+    if ((config === null || config === void 0 ? void 0 : config.type) === 'datePicker') {
+      var _v$fieldName;
+      v[fieldName] = (_v$fieldName = v[fieldName]) === null || _v$fieldName === void 0 ? void 0 : _v$fieldName.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss');
+    }
+    if ((config === null || config === void 0 ? void 0 : config.type) === 'rangePicker') {
+      var _v$fieldName$, _v$fieldName$2;
+      v[fieldName] = [(_v$fieldName$ = v[fieldName][0]) === null || _v$fieldName$ === void 0 ? void 0 : _v$fieldName$.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss'), (_v$fieldName$2 = v[fieldName][1]) === null || _v$fieldName$2 === void 0 ? void 0 : _v$fieldName$2.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss')];
+    }
+    return v;
+  };
   var search = function search() {
     var values = form.getFieldsValue();
     Object.keys(values).forEach(function (item) {
@@ -61,21 +76,6 @@ export default (function (props) {
     var value = formatTime(v);
     onValuesChange && onValuesChange(value);
   };
-  var formatTime = function formatTime(v) {
-    var fieldName = Object.keys(v)[0];
-    var config = formItemConfig.find(function (item) {
-      return item.name === fieldName;
-    });
-    if ((config === null || config === void 0 ? void 0 : config.type) === 'datePicker') {
-      var _v$fieldName;
-      v[fieldName] = (_v$fieldName = v[fieldName]) === null || _v$fieldName === void 0 ? void 0 : _v$fieldName.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss');
-    }
-    if ((config === null || config === void 0 ? void 0 : config.type) === 'rangePicker') {
-      var _v$fieldName$, _v$fieldName$2;
-      v[fieldName] = [(_v$fieldName$ = v[fieldName][0]) === null || _v$fieldName$ === void 0 ? void 0 : _v$fieldName$.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss'), (_v$fieldName$2 = v[fieldName][1]) === null || _v$fieldName$2 === void 0 ? void 0 : _v$fieldName$2.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss')];
-    }
-    return v;
-  };
   var reset = function reset() {
     form.resetFields();
     onReset && onReset();

package/dist/esm/AdvancedFilter/index.js

@@ -49,9 +49,11 @@ var AdvancedFilter = function AdvancedFilter(props) {
   var handleSearch = function handleSearch(values) {
     var _inputRef$current, _inputRef$current$inp;
     var value = inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$inp = _inputRef$current.input) === null || _inputRef$current$inp === void 0 ? void 0 : _inputRef$current$inp.value;
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
     onSearch && onSearch(_objectSpread(_objectSpread({}, values), _defineProperty({}, inputProps.name, value)));
   };
   var inputSearch = function inputSearch(v) {
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
     (inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSearch) && inputProps.inputSearch(_defineProperty({}, inputProps.name, v));
   };
   return /*#__PURE__*/_jsx(Collapse, {
@@ -83,6 +85,7 @@ var AdvancedFilter = function AdvancedFilter(props) {
             placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
             onChange: function onChange(e) {
               setInputValue(e.target.value);
+              // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
               onValuesChange && onValuesChange(e.target.value);
             },
             onSearch: inputSearch,

package/dist/esm/AdvancedFilter/interface.d.ts

@@ -1,4 +1,31 @@
 import React from 'react';
+export declare type FormItemType = 'input' | 'inputNumber' | 'radio' | 'select' | 'checkbox' | 'datePicker' | 'rangePicker' | 'switch' | 'treeSelect';
+export interface FormItem {
+    /**
+     * @description 筛选项label文字
+     */
+    label?: string;
+    /**
+     * @description 筛选项字段名
+     */
+    name: string;
+    /**
+     * @description 筛选项类型
+     */
+    type: FormItemType;
+    /**
+     * @description 筛选项placeholder
+     */
+    placeholder?: string;
+    /**
+     * @description 筛选项的配置项(select|treeSelect时可用)
+     */
+    options?: any[];
+    /**
+     * @description 筛选项的格式化配置(rangePicker|datePicker时可用)
+     */
+    format?: string;
+}
 export interface FormProps {
     /**
      * @description 筛选项配置
@@ -28,6 +55,20 @@ export interface FProps extends FormProps {
      */
     formRef?: any;
 }
+export interface InputProps {
+    /**
+     * @description input检索框placeholder
+     */
+    placeholder?: string;
+    /**
+     * @description input检索框字段名
+     */
+    name: string;
+    /**
+     * @description input检索框回车时或点击检索图标时触发
+     */
+    inputSearch?: (v: any) => void;
+}
 export interface FilterProps extends FormProps {
     /**
      * @description 左侧渲染区
@@ -54,44 +95,3 @@ export interface FilterProps extends FormProps {
      */
     icon?: React.ReactNode;
 }
-export interface FormItem {
-    /**
-     * @description 筛选项label文字
-     */
-    label?: string;
-    /**
-     * @description 筛选项字段名
-     */
-    name: string;
-    /**
-     * @description 筛选项类型
-     */
-    type: FormItemType;
-    /**
-     * @description 筛选项placeholder
-     */
-    placeholder?: string;
-    /**
-     * @description 筛选项的配置项(select|treeSelect时可用)
-     */
-    options?: any[];
-    /**
-     * @description 筛选项的格式化配置(rangePicker|datePicker时可用)
-     */
-    format?: string;
-}
-export declare type FormItemType = 'input' | 'inputNumber' | 'radio' | 'select' | 'checkbox' | 'datePicker' | 'rangePicker' | 'switch' | 'treeSelect';
-export interface InputProps {
-    /**
-     * @description input检索框placeholder
-     */
-    placeholder?: string;
-    /**
-     * @description input检索框字段名
-     */
-    name: string;
-    /**
-     * @description input检索框回车时或点击检索图标时触发
-     */
-    inputSearch?: (v: any) => void;
-}

package/dist/esm/ColorPicker/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ColorPickerProps, TwitterPickerProps, HuePickerProps, AlphaPickerProps, BlockPickerProps, ChromePickerProps, CompactPickerProps, CirclePickerProps, SliderPickerProps } from './interface';
+import './index.less';
+declare const ColorPicker: {
+    (props: ColorPickerProps): JSX.Element;
+    PSPicker(props: ColorPickerProps & {
+        title?: string;
+    }): JSX.Element;
+    SliderPicker(props: SliderPickerProps): JSX.Element;
+    AlphaPicker(props: AlphaPickerProps): JSX.Element;
+    BlockPicker(props: BlockPickerProps): JSX.Element;
+    ChromePicker(props: ChromePickerProps): JSX.Element;
+    CirclePicker(props: CirclePickerProps): JSX.Element;
+    CompactPicker(props: CompactPickerProps): JSX.Element;
+    HuePicker(props: HuePickerProps): JSX.Element;
+    TwitterPicker(props: TwitterPickerProps): JSX.Element;
+};
+export default ColorPicker;

package/dist/esm/ColorPicker/index.js

@@ -0,0 +1,165 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/*
+ * @Author       : frank
+ * @Date         : 2023-11-21
+ * @Description  : 多模式颜色选择器组件
+ */
+import { useState, useContext } from 'react';
+import classNames from 'classnames';
+import { Popconfirm } from 'antd';
+import { SketchPicker, PhotoshopPicker, SliderPicker, AlphaPicker, BlockPicker, ChromePicker, CirclePicker, CompactPicker, HuePicker, TwitterPicker } from 'react-color';
+import { ConfigContext } from "../ConfigProvider";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ColorPicker = function ColorPicker(props) {
+  var className = props.className,
+    _props$initColor = props.initColor,
+    initColor = _props$initColor === void 0 ? '#ff0000' : _props$initColor,
+    onChange = props.onChange,
+    onCancel = props.onCancel,
+    onConfirm = props.onConfirm,
+    onChangeComplete = props.onChangeComplete;
+  var _useContext = useContext(ConfigContext),
+    prefixCls = _useContext.prefixCls,
+    getPrefixCls = _useContext.getPrefixCls;
+  var classname = getPrefixCls('color-picker');
+  var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-color-picker"), !!prefixCls), classname, className);
+  var triggerClass = classNames(_defineProperty({}, "".concat(className, "-trigger"), !!className), 'trigger');
+  var _useState = useState(initColor),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  var _useState3 = useState(initColor),
+    _useState4 = _slicedToArray(_useState3, 2),
+    finialColor = _useState4[0],
+    setFinialColor = _useState4[1];
+  var handleConfirm = function handleConfirm() {
+    var _color = color !== null && color !== void 0 && color.a ? "rgba(".concat(color === null || color === void 0 ? void 0 : color.r, ",").concat(color === null || color === void 0 ? void 0 : color.g, ",").concat(color === null || color === void 0 ? void 0 : color.b, ",").concat(color === null || color === void 0 ? void 0 : color.a, ")") : initColor;
+    setFinialColor(_color);
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    onConfirm && onConfirm(_color);
+  };
+  var handleChange = function handleChange(e) {
+    setColor(e.rgb);
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    onChange && onChange(e);
+  };
+  var handleChangeComplete = function handleChangeComplete(v) {
+    var _color = color !== null && color !== void 0 && color.a ? "rgba(".concat(color === null || color === void 0 ? void 0 : color.r, ",").concat(color === null || color === void 0 ? void 0 : color.g, ",").concat(color === null || color === void 0 ? void 0 : color.b, ",").concat(color === null || color === void 0 ? void 0 : color.a, ")") : initColor;
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    onChangeComplete && onChangeComplete(_color);
+  };
+  return /*#__PURE__*/_jsx(Popconfirm, {
+    overlayClassName: wrapperClass,
+    icon: null,
+    title: /*#__PURE__*/_jsx(SketchPicker, {
+      className: "picker",
+      color: color,
+      onChange: handleChange,
+      onChangeComplete: handleChangeComplete
+    }),
+    onConfirm: handleConfirm,
+    onCancel: onCancel,
+    okText: "\u786E\u5B9A",
+    cancelText: "\u53D6\u6D88",
+    children: /*#__PURE__*/_jsx("span", {
+      className: triggerClass,
+      style: {
+        background: finialColor
+      }
+    })
+  });
+};
+var PsPicker = function PsPicker(_ref) {
+  var className = _ref.className,
+    initColor = _ref.initColor,
+    onConfirm = _ref.onConfirm,
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete,
+    title = _ref.title;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showColorPicker = _useState6[0],
+    setShowColorPicker = _useState6[1];
+  var _useState7 = useState(initColor),
+    _useState8 = _slicedToArray(_useState7, 2),
+    color = _useState8[0],
+    setColor = _useState8[1];
+  var _useState9 = useState(initColor),
+    _useState10 = _slicedToArray(_useState9, 2),
+    finialColor = _useState10[0],
+    setFinialColor = _useState10[1];
+  var triggerClass = classNames(_defineProperty({}, "".concat(className, "-trigger"), !!className), 'trigger');
+  var onCancel = function onCancel() {
+    setShowColorPicker(false);
+  };
+  var onOk = function onOk() {
+    var _color = color !== null && color !== void 0 && color.r ? "rgba(".concat(color === null || color === void 0 ? void 0 : color.r, ",").concat(color === null || color === void 0 ? void 0 : color.g, ",").concat(color === null || color === void 0 ? void 0 : color.b, ",").concat(color === null || color === void 0 ? void 0 : color.a, ")") : initColor;
+    setShowColorPicker(false);
+    setFinialColor(_color);
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    onConfirm && onConfirm(color);
+  };
+  var handleClick = function handleClick() {
+    setShowColorPicker(true);
+  };
+  var handleChange = function handleChange(e) {
+    setColor(e.rgb);
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    onChange && onChange(e);
+  };
+  var handleChangeComplete = function handleChangeComplete() {
+    var _color = color !== null && color !== void 0 && color.a ? "rgba(".concat(color === null || color === void 0 ? void 0 : color.r, ",").concat(color === null || color === void 0 ? void 0 : color.g, ",").concat(color === null || color === void 0 ? void 0 : color.b, ",").concat(color === null || color === void 0 ? void 0 : color.a, ")") : initColor;
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    onChangeComplete && onChangeComplete(_color);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: triggerClass,
+      style: {
+        background: finialColor
+      },
+      onClick: handleClick
+    }), showColorPicker ? /*#__PURE__*/_jsx(PhotoshopPicker, {
+      className: "ps-picker",
+      color: color,
+      header: title,
+      onChange: handleChange,
+      onChangeComplete: handleChangeComplete,
+      onCancel: onCancel,
+      onAccept: onOk
+    }) : null]
+  });
+};
+ColorPicker.PSPicker = function (props) {
+  return /*#__PURE__*/_jsx(PsPicker, _objectSpread({}, props));
+};
+ColorPicker.SliderPicker = function (props) {
+  return /*#__PURE__*/_jsx(SliderPicker, _objectSpread({}, props));
+};
+ColorPicker.AlphaPicker = function (props) {
+  return /*#__PURE__*/_jsx(AlphaPicker, _objectSpread({}, props));
+};
+ColorPicker.BlockPicker = function (props) {
+  return /*#__PURE__*/_jsx(BlockPicker, _objectSpread({}, props));
+};
+ColorPicker.ChromePicker = function (props) {
+  return /*#__PURE__*/_jsx(ChromePicker, _objectSpread({}, props));
+};
+ColorPicker.CirclePicker = function (props) {
+  return /*#__PURE__*/_jsx(CirclePicker, _objectSpread({}, props));
+};
+ColorPicker.CompactPicker = function (props) {
+  return /*#__PURE__*/_jsx(CompactPicker, _objectSpread({}, props));
+};
+ColorPicker.HuePicker = function (props) {
+  return /*#__PURE__*/_jsx(HuePicker, _objectSpread({}, props));
+};
+ColorPicker.TwitterPicker = function (props) {
+  return /*#__PURE__*/_jsx(TwitterPicker, _objectSpread({}, props));
+};
+export default ColorPicker;

package/dist/esm/ColorPicker/index.less

@@ -0,0 +1,18 @@
+@import '../commonStyle/index.less';
+
+.@{prefix}-color-picker {
+  .sketch-picker {
+    padding: 0 !important;
+    box-shadow: none !important;
+  }
+}
+
+.trigger {
+  display: inline-block;
+  width: 60px;
+  height: 26px;
+  border: 5px solid #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 2px #000;
+  cursor: pointer;
+}

package/dist/esm/ColorPicker/interface.d.ts

@@ -0,0 +1,164 @@
+/// <reference types="react" />
+declare type Hlsa = {
+    h: number;
+    s: number;
+    l: number;
+    a?: number;
+};
+declare type Rgba = {
+    r: number;
+    b: number;
+    g: number;
+    a?: number;
+};
+interface ComponentProps {
+    /**
+     * 组件的颜色状态值
+     */
+    color?: string | Hlsa | Rgba | undefined;
+    /**
+     * 颜色值变化时触发
+     * @param v 色值对象
+     */
+    onChange?: (v: any) => void;
+    /**
+     * 颜色变化完成时触发
+     * @param v 颜色值 rgba
+     */
+    onChangeComplete?: (v: any) => void;
+}
+export interface ColorPickerProps extends ComponentProps {
+    /**
+     * 容器类名
+     */
+    className?: string;
+    /**
+     * 初始颜色，触发按钮的默认色
+     */
+    initColor?: string;
+    /**
+     * 点击取消时的回调函数
+     */
+    onCancel?: () => void;
+    /**
+     * 点击确定时的回调函数
+     */
+    onConfirm: (v: any) => void;
+}
+export interface TwitterPickerProps extends ComponentProps {
+    /**
+     * 单个色块的宽度(px)
+     * @default 276
+     */
+    width?: string;
+    /**
+     * 默认展示的颜色值集合
+     * @default ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']
+     */
+    colors?: string[];
+    /**
+     * 小三角形位置
+     */
+    triangle?: 'hide' | 'top-left' | 'top-right';
+}
+export interface HuePickerProps extends ComponentProps {
+    /**
+     * 自定义滑块
+     */
+    pointer?: React.ReactNode;
+    /**
+     * 方向
+     * @default horizontal
+     */
+    direction?: 'horizontal' | 'vertical';
+}
+export interface AlphaPickerProps extends ComponentProps {
+    /**
+     * 单个色块的宽度(px)
+     * @default 316
+     */
+    width?: string;
+    /**
+     * 单个色块的高度(px)
+     * @default 16
+     */
+    height?: string;
+    /**
+     * 方向
+     * @default horizontal
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * 自定义滑块
+     */
+    pointer?: React.ReactNode;
+}
+export interface SliderPickerProps extends ComponentProps {
+    /**
+     * 自定义滑块
+     */
+    pointer?: React.ReactNode;
+}
+export interface CompactPickerProps extends ComponentProps {
+    /**
+     * 默认展示的颜色值集合
+     * @default ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E']
+     */
+    colors?: string[];
+}
+export interface CirclePickerProps extends ComponentProps {
+    /**
+     * 单个色块的宽度(px)
+     * @default 252
+     */
+    width?: string;
+    /**
+     * 默认展示的颜色值集合
+     * @default ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]
+     */
+    colors?: string[];
+    /**
+     * 圆圈大小
+     * @default 28
+     */
+    circleSize?: number;
+    /**
+     * 圆圈之间的间隔(px)
+     * @default 14
+     */
+    circleSpacing?: number;
+}
+export interface BlockPickerProps extends ComponentProps {
+    /**
+     * 单个色块的宽度(px)
+     * @default 170
+     */
+    width?: string;
+    /**
+     * 默认展示的颜色值集合
+     * @default ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']
+     */
+    colors?: string[];
+    /**
+     * 小三角的位置
+     * @default 'top'
+     */
+    triangle?: 'hide' | 'top';
+}
+export interface ChromePickerProps extends ComponentProps {
+    /**
+     * 是否显示不透明度的配置项
+     * @default false
+     */
+    disableAlpha?: boolean;
+}
+export declare type ColorPickerType = ColorPickerProps;
+export declare type TwitterPickerType = TwitterPickerProps;
+export declare type HuePickerType = HuePickerProps;
+export declare type AlphaPickerType = AlphaPickerProps;
+export declare type SliderPickerType = SliderPickerProps;
+export declare type CompactPickerType = CompactPickerProps;
+export declare type CirclePickerType = CirclePickerProps;
+export declare type BlockPickerType = BlockPickerProps;
+export declare type ChromePickerType = ChromePickerProps;
+export {};

package/dist/esm/ColorPicker/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/LabelValue/interface.d.ts

@@ -6,7 +6,7 @@ export interface LabelValueProps {
     /**
      * @description 文字标签值
      */
-    value?: string | undefined;
+    value?: string | undefined | null;
     /**
      * @description 文字标签值为空时的值
      * @default -

package/dist/esm/ScrollNumber/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CountUpProps as ICountUpProps } from 'react-countup';
+declare const ScrollNumber: {
+    (props: ICountUpProps): JSX.Element;
+    useCountUp: (props: import("react-countup/build/useCountUp").UseCountUpProps) => import("react-countup/build/types").CountUpApi;
+};
+export declare type ScrollNumberProps = ICountUpProps;
+export default ScrollNumber;

package/dist/esm/ScrollNumber/index.js

@@ -0,0 +1,56 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useMemo, useContext } from 'react';
+import CountUp, { useCountUp } from 'react-countup';
+import classNames from 'classnames';
+import { ConfigContext } from "../ConfigProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ScrollNumber = function ScrollNumber(props) {
+  var _props$start = props.start,
+    start = _props$start === void 0 ? 0 : _props$start,
+    end = props.end,
+    _props$decimals = props.decimals,
+    decimals = _props$decimals === void 0 ? 2 : _props$decimals,
+    _props$separator = props.separator,
+    separator = _props$separator === void 0 ? ',' : _props$separator,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$delay = props.delay,
+    delay = _props$delay === void 0 ? 0 : _props$delay,
+    children = props.children;
+  var _useContext = useContext(ConfigContext),
+    prefixCls = _useContext.prefixCls,
+    getPrefixCls = _useContext.getPrefixCls;
+  var classname = getPrefixCls('scroll-number');
+  var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-scroll-number"), !!prefixCls), classname, className);
+  var config = useMemo(function () {
+    var num = "".concat(end);
+    if (num.length < 2) return {
+      num: end,
+      duration: 0.8
+    };
+    if (num.length < 4) return {
+      num: end,
+      duration: 1.5
+    };
+    return {
+      num: end,
+      duration: 1.8
+    };
+  }, [end]);
+  return /*#__PURE__*/_jsx("div", {
+    className: wrapperClass,
+    children: /*#__PURE__*/_jsx(CountUp, _objectSpread(_objectSpread({}, props), {}, {
+      className: className,
+      start: start,
+      end: config === null || config === void 0 ? void 0 : config.num,
+      duration: config === null || config === void 0 ? void 0 : config.duration,
+      delay: delay,
+      decimals: decimals,
+      separator: separator,
+      children: children
+    }))
+  });
+};
+ScrollNumber.useCountUp = useCountUp;
+export default ScrollNumber;

package/dist/esm/index.d.ts

@@ -22,3 +22,7 @@ export type { DFormProps, DFormRefProps, DItemProps } from './DForm';
 export { default as DForm } from './DForm';
 export type { LModalProps } from './LModal/interface';
 export { default as LModal } from './LModal';
+export { default as ColorPicker } from './ColorPicker';
+export type { ColorPickerType, TwitterPickerType, HuePickerType, AlphaPickerType, BlockPickerType, ChromePickerType, CompactPickerType, CirclePickerType, SliderPickerType, } from './ColorPicker/interface';
+export { default as ScrollNumber } from './ScrollNumber';
+export type { ScrollNumberProps } from './ScrollNumber';

package/dist/esm/index.js

@@ -12,4 +12,6 @@ export { default as DTreeSelect } from "./DTreeSelect";
 export { default as DUpload } from "./DUpload";
 export { default as DTable } from "./DTable";
 export { default as DForm } from "./DForm";
-export { default as LModal } from "./LModal";
+export { default as LModal } from "./LModal";
+export { default as ColorPicker } from "./ColorPicker";
+export { default as ScrollNumber } from "./ScrollNumber";

package/dist/umd/pcloud-components.min.css

@@ -1 +1 @@
-.pui-label-value{display:inline-flex}.pui-label-value span:first-child{max-width:120px;padding-right:4px;white-space:nowrap}.pui-label-value span:last-child{flex:1 1}.pui-label-value span:last-child.no-wrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-search-filter{align-items:center;background-color:#fff;margin-top:10px;width:100%}.pui-search-filter span.ant-collapse-header-text{cursor:auto!important;display:inline-block;width:100%}.pui-search-filter .ant-collapse-content-box{padding:0}.pui-search-filter .search-header{display:flex;width:100%}.pui-search-filter .search-header .left{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:no-wrap}.pui-search-filter .search-header .left :global .ant-radio-wrapper:first-child{border-left:1px solid #d9d9d9;border-radius:5px 0 0 5px}.pui-search-filter .search-header .left :global .ant-radio-wrapper:last-child{border-radius:0 5px 5px 0}.pui-search-filter .search-header .left :global .ant-radio-wrapper{border:1px solid #d9d9d9;border-left-color:#fff;margin-right:0;padding:4px 6px}.pui-search-filter .search-header .left :global .ant-radio-wrapper .ant-radio{display:none}.pui-search-filter .search-header .left :global .ant-radio-wrapper:hover{color:#1890ff}.pui-search-filter .search-header .left :global .ant-radio-wrapper-checked{background:#fff;border:1px solid #1890ff;border-left:1px solid #1890ff!important;color:#1890ff;z-index:1}.pui-search-filter .search-header .right{display:flex;justify-content:center}.pui-search-filter .search-header .right .input{border-radius:4px;width:200px}.pui-search-filter .search-header .right .button{background-color:#ff7e00;border-radius:4px;color:#fff;margin-left:10px}.pui-search-filter .search-header .right .button:active,.pui-search-filter .search-header .right .button:focus,.pui-search-filter .search-header .right .button:hover{border-color:transparent}.pui-search-filter .search-header .right .button .icon{margin-left:8px;transition:transform .4s}.pui-search-filter .search-header .right .button .icon.down{transform:rotate(180deg)}.pui-search-filter .search-header .right .button .icon.up{transform:rotate(0deg)}.pui-search-filter .title{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;font-weight:700;margin:0 10px;padding-bottom:10px}.pui-search-filter .title span.icon{background-color:#ff7e00;border-radius:2px;height:16px;margin-right:6px;width:4px}.pui-search-filter .search-content .filter-row{display:flex;flex-wrap:wrap;padding:10px;width:100%}.pui-search-filter .search-content .filter-col{height:30px;line-height:30px;margin-bottom:10px}.pui-search-filter .search-content .filter-col .ant-picker{width:100%}.pui-search-filter .search-content .search-btn{justify-content:center}.pui-search-filter .search-content .search-btn>button{margin:0 5px}.pui-error-boundary{align-items:center;background-color:#dd7f7f;border-radius:10px;display:flex;flex-direction:column;justify-content:center;margin:20px;padding:15px;width:auto}.pui-error-boundary .error-text{margin-top:20px}.pui-error-boundary .error-refresh{background-color:#4593ef;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;height:40px;line-height:40px;text-align:center;width:140px}.pui-error-boundary .errorDetiles .detilesLink{color:blue}.pui-error-boundary .errorDetiles .errordetails{background-color:#ccc6be;border:1px solid #777;border-radius:5px;color:#777;font-size:80%;padding:10px}.pui-loading .mask{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100000}.pui-loading .loading{background:#fff;border-radius:10px;box-shadow:3px 3px 3px rgba(0,0,0,.2);padding:20px;z-index:100001}.pui-loading .loading,.pui-nodata{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.pui-nodata .not-data-image{display:block;height:100px}.pui-nodata .no-data-text{color:#000;display:inline-block;font-size:14px;font-weight:400;margin-top:5px;opacity:.65;text-align:center;width:100%}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar{height:8px;width:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.5);border-radius:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-track{border-radius:2px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper .ant-select-tree-title{overflow:hidden}.pui-upload .preview .ant-upload-list-item-actions a[target=_blank][rel="noopener noreferrer"]{opacity:1!important;pointer-events:auto!important}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-thumbnail{height:46px}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-name{display:inline;display:initial;position:absolute}.pui-table .ant-spin-container,.pui-table .ant-spin-nested-loading,.pui-table .ant-table,.pui-table .ant-table-container{height:100%;width:100%}.pui-table .ant-table-body{max-height:calc(100% - 56px);max-width:100%;min-height:calc(100% - 56px);min-width:100%;overflow-y:auto!important;position:absolute}.pui-table .ant-table-body .ant-table-tbody>tr>td.ant-table-cell.d-table-cell-wrap{white-space:normal}.pui-table .ant-table-body::-webkit-scrollbar{height:8px;width:4px}.pui-table .ant-table-body::-webkit-scrollbar-thumb{background-color:#0084ff}.pui-table .ant-table-body::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:2px}.pui-table .ant-table-body::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-table .ant-spin-nested-loading>div>.ant-spin{max-height:none}.pui-table .ant-pagination-total-text span{color:#40a9ff;font-weight:700}.pui-table.height-on-page .ant-table{height:calc(100% - 56px)}.pui-form .form-wrapper>*{margin-bottom:24px;margin-right:0;min-height:32px;padding-right:16px}.pui-form.ant-form-horizontal .ant-form-item-label{min-width:80px}.pui-form.ant-form-inline .form-wrapper,.pui-form.ant-form-inline.inlineVertical .form-wrapper{align-items:flex-end;display:flex;flex-wrap:wrap;height:min-content}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row{flex-direction:column}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row .ant-form-item-label{text-align:left}.pui-modal-container .ant-modal-wrap .ant-modal{height:100%;max-width:none}.pui-modal-container .ant-modal-wrap .ant-modal .ant-modal-content{height:100%;width:100%}.pui-absolute-modal-container .ant-modal-wrap{position:fixed}.pui-relative-modal-container .ant-modal-wrap{position:absolute}
+.pui-label-value{display:inline-flex}.pui-label-value span:first-child{max-width:120px;padding-right:4px;white-space:nowrap}.pui-label-value span:last-child{flex:1 1}.pui-label-value span:last-child.no-wrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-search-filter{align-items:center;background-color:#fff;margin-top:10px;width:100%}.pui-search-filter span.ant-collapse-header-text{cursor:auto!important;display:inline-block;width:100%}.pui-search-filter .ant-collapse-content-box{padding:0}.pui-search-filter .search-header{display:flex;width:100%}.pui-search-filter .search-header .left{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:no-wrap}.pui-search-filter .search-header .left :global .ant-radio-wrapper:first-child{border-left:1px solid #d9d9d9;border-radius:5px 0 0 5px}.pui-search-filter .search-header .left :global .ant-radio-wrapper:last-child{border-radius:0 5px 5px 0}.pui-search-filter .search-header .left :global .ant-radio-wrapper{border:1px solid #d9d9d9;border-left-color:#fff;margin-right:0;padding:4px 6px}.pui-search-filter .search-header .left :global .ant-radio-wrapper .ant-radio{display:none}.pui-search-filter .search-header .left :global .ant-radio-wrapper:hover{color:#1890ff}.pui-search-filter .search-header .left :global .ant-radio-wrapper-checked{background:#fff;border:1px solid #1890ff;border-left:1px solid #1890ff!important;color:#1890ff;z-index:1}.pui-search-filter .search-header .right{display:flex;justify-content:center}.pui-search-filter .search-header .right .input{border-radius:4px;width:200px}.pui-search-filter .search-header .right .button{background-color:#ff7e00;border-radius:4px;color:#fff;margin-left:10px}.pui-search-filter .search-header .right .button:active,.pui-search-filter .search-header .right .button:focus,.pui-search-filter .search-header .right .button:hover{border-color:transparent}.pui-search-filter .search-header .right .button .icon{margin-left:8px;transition:transform .4s}.pui-search-filter .search-header .right .button .icon.down{transform:rotate(180deg)}.pui-search-filter .search-header .right .button .icon.up{transform:rotate(0deg)}.pui-search-filter .title{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;font-weight:700;margin:0 10px;padding-bottom:10px}.pui-search-filter .title span.icon{background-color:#ff7e00;border-radius:2px;height:16px;margin-right:6px;width:4px}.pui-search-filter .search-content .filter-row{display:flex;flex-wrap:wrap;padding:10px;width:100%}.pui-search-filter .search-content .filter-col{height:30px;line-height:30px;margin-bottom:10px}.pui-search-filter .search-content .filter-col .ant-picker{width:100%}.pui-search-filter .search-content .search-btn{justify-content:center}.pui-search-filter .search-content .search-btn>button{margin:0 5px}.pui-error-boundary{align-items:center;background-color:#dd7f7f;border-radius:10px;display:flex;flex-direction:column;justify-content:center;margin:20px;padding:15px;width:auto}.pui-error-boundary .error-text{margin-top:20px}.pui-error-boundary .error-refresh{background-color:#4593ef;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;height:40px;line-height:40px;text-align:center;width:140px}.pui-error-boundary .errorDetiles .detilesLink{color:blue}.pui-error-boundary .errorDetiles .errordetails{background-color:#ccc6be;border:1px solid #777;border-radius:5px;color:#777;font-size:80%;padding:10px}.pui-loading .mask{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100000}.pui-loading .loading{background:#fff;border-radius:10px;box-shadow:3px 3px 3px rgba(0,0,0,.2);padding:20px;z-index:100001}.pui-loading .loading,.pui-nodata{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.pui-nodata .not-data-image{display:block;height:100px}.pui-nodata .no-data-text{color:#000;display:inline-block;font-size:14px;font-weight:400;margin-top:5px;opacity:.65;text-align:center;width:100%}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar{height:8px;width:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.5);border-radius:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-track{border-radius:2px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper .ant-select-tree-title{overflow:hidden}.pui-upload .preview .ant-upload-list-item-actions a[target=_blank][rel="noopener noreferrer"]{opacity:1!important;pointer-events:auto!important}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-thumbnail{height:46px}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-name{display:inline;display:initial;position:absolute}.pui-table .ant-spin-container,.pui-table .ant-spin-nested-loading,.pui-table .ant-table,.pui-table .ant-table-container{height:100%;width:100%}.pui-table .ant-table-body{max-height:calc(100% - 56px);max-width:100%;min-height:calc(100% - 56px);min-width:100%;overflow-y:auto!important;position:absolute}.pui-table .ant-table-body .ant-table-tbody>tr>td.ant-table-cell.d-table-cell-wrap{white-space:normal}.pui-table .ant-table-body::-webkit-scrollbar{height:8px;width:4px}.pui-table .ant-table-body::-webkit-scrollbar-thumb{background-color:#0084ff}.pui-table .ant-table-body::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:2px}.pui-table .ant-table-body::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-table .ant-spin-nested-loading>div>.ant-spin{max-height:none}.pui-table .ant-pagination-total-text span{color:#40a9ff;font-weight:700}.pui-table.height-on-page .ant-table{height:calc(100% - 56px)}.pui-form .form-wrapper>*{margin-bottom:24px;margin-right:0;min-height:32px;padding-right:16px}.pui-form.ant-form-horizontal .ant-form-item-label{min-width:80px}.pui-form.ant-form-inline .form-wrapper,.pui-form.ant-form-inline.inlineVertical .form-wrapper{align-items:flex-end;display:flex;flex-wrap:wrap;height:min-content}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row{flex-direction:column}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row .ant-form-item-label{text-align:left}.pui-modal-container .ant-modal-wrap .ant-modal{height:100%;max-width:none}.pui-modal-container .ant-modal-wrap .ant-modal .ant-modal-content{height:100%;width:100%}.pui-absolute-modal-container .ant-modal-wrap{position:fixed}.pui-relative-modal-container .ant-modal-wrap{position:absolute}.pui-color-picker .sketch-picker{box-shadow:none!important;padding:0!important}.trigger{border:5px solid #fff;border-radius:2px;box-shadow:0 0 2px #000;cursor:pointer;display:inline-block;height:26px;width:60px}