@pointcloud/pcloud-components 0.1.20 → 0.1.23

package/dist/esm/RCropper/index.js

@@ -0,0 +1,183 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useCallback, useMemo } from 'react';
+import Cropper, { toKebabCase } from 'cropperjs';
+import classNames from 'classnames';
+import { ConfigContext } from "../ConfigProvider";
+import { createCropperHandlers } from "./handler";
+import Toolbar from "./toolbar";
+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 isNonEmptyObject = function isNonEmptyObject(obj) {
+  return _typeof(obj) === 'object' && obj !== null && !Array.isArray(obj) && Object.keys(obj).length > 0;
+};
+
+/**
+ * 属性设置方法
+ * @param element DOM元素
+ * @param attrName 属性名(kebab-case)
+ * @param value 属性值
+ */
+var setElementAttribute = function setElementAttribute(element, attrName, value) {
+  if (!element) return;
+  // 处理布尔值
+  if (typeof value === 'boolean') {
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    value ? element.setAttribute(attrName, '') : element.removeAttribute(attrName);
+  } else if (value === null || value === undefined) {
+    element.removeAttribute(attrName);
+  } else {
+    element.setAttribute(attrName, String(value));
+  }
+};
+var RCropper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var src = props.src,
+    _props$alt = props.alt,
+    alt = _props$alt === void 0 ? 'image' : _props$alt,
+    className = props.className,
+    style = props.style,
+    grid = props.grid,
+    canvas = props.canvas,
+    selection = props.selection,
+    dragMode = props.dragMode,
+    onCrop = props.onCrop,
+    onZoom = props.onZoom,
+    onRotate = props.onRotate,
+    onFlip = props.onFlip,
+    onReset = props.onReset,
+    onCancelCrop = props.onCancelCrop;
+  var _useContext = useContext(ConfigContext),
+    prefixCls = _useContext.prefixCls,
+    getPrefixCls = _useContext.getPrefixCls;
+  var classname = getPrefixCls('rcropper');
+  var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-rcropper"), !!prefixCls), classname, className);
+  var cropperRef = useRef(null);
+  var cropperInstanceRef = useRef(null);
+  var imgTransformRef = useRef();
+  var setCropperElementAttributes = useCallback(function (elementGetter, props) {
+    var nextTick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (cropperInstanceRef.current && isNonEmptyObject(props)) {
+      var element = elementGetter(cropperInstanceRef.current);
+      Object.keys(props).forEach(function (key) {
+        var kebabKey = toKebabCase(key);
+        if (props[key] !== undefined) {
+          var setAttr = function setAttr() {
+            return setElementAttribute(element, kebabKey, props[key]);
+          };
+          if (nextTick) {
+            var _element$$nextTick;
+            element === null || element === void 0 || (_element$$nextTick = element.$nextTick) === null || _element$$nextTick === void 0 || _element$$nextTick.call(element, setAttr);
+          } else {
+            setAttr();
+          }
+        }
+      });
+    }
+  }, []);
+  var setGrid = useCallback(function (_grid) {
+    setCropperElementAttributes(function (cropper) {
+      var _cropper$getCropperSe;
+      return (_cropper$getCropperSe = cropper.getCropperSelection()) === null || _cropper$getCropperSe === void 0 ? void 0 : _cropper$getCropperSe.querySelector('cropper-grid');
+    }, _grid);
+  }, []);
+  var setSelection = useCallback(function (_selection) {
+    setCropperElementAttributes(function (cropper) {
+      return cropper.getCropperSelection();
+    }, _selection, true);
+  }, []);
+  var setCanvas = useCallback(function (_canvas) {
+    setCropperElementAttributes(function (cropper) {
+      return cropper.getCropperCanvas();
+    }, _canvas, true);
+  }, []);
+  var setDragMode = function setDragMode(_dragMode) {
+    if (cropperInstanceRef.current) {
+      var selectionDom = cropperInstanceRef.current.getCropperSelection();
+      var handleDom = selectionDom === null || selectionDom === void 0 ? void 0 : selectionDom.querySelector('cropper-handle');
+      handleDom === null || handleDom === void 0 || handleDom.setAttribute('action', _dragMode || 'crop');
+    }
+  };
+  // initialize cropper options
+  var initializeOptions = useCallback(function () {
+    if (isNonEmptyObject(grid)) setGrid(grid);
+    if (isNonEmptyObject(canvas)) setCanvas(canvas);
+    if (isNonEmptyObject(selection)) setSelection(selection);
+    if (dragMode) setDragMode(dragMode);
+  }, [dragMode, grid, canvas, selection]);
+  var handleAction = useMemo(function () {
+    return createCropperHandlers(cropperInstanceRef, imgTransformRef, {
+      onCrop: onCrop,
+      onZoom: onZoom,
+      onRotate: onRotate,
+      onFlip: onFlip,
+      onReset: onReset,
+      onCancelCrop: onCancelCrop
+    });
+  }, [onCrop, onZoom, onRotate, onFlip, onReset, onCancelCrop]);
+  useImperativeHandle(ref, function () {
+    var _cropperInstanceRef$c, _cropperInstanceRef$c2, _cropperInstanceRef$c3, _cropperInstanceRef$c4, _cropperInstanceRef$c5, _cropperInstanceRef$c6;
+    return {
+      cropper: cropperInstanceRef.current,
+      image: (_cropperInstanceRef$c = (_cropperInstanceRef$c2 = cropperInstanceRef.current) === null || _cropperInstanceRef$c2 === void 0 ? void 0 : _cropperInstanceRef$c2.getCropperImage()) !== null && _cropperInstanceRef$c !== void 0 ? _cropperInstanceRef$c : null,
+      canvas: (_cropperInstanceRef$c3 = (_cropperInstanceRef$c4 = cropperInstanceRef.current) === null || _cropperInstanceRef$c4 === void 0 ? void 0 : _cropperInstanceRef$c4.getCropperCanvas()) !== null && _cropperInstanceRef$c3 !== void 0 ? _cropperInstanceRef$c3 : null,
+      selection: (_cropperInstanceRef$c5 = (_cropperInstanceRef$c6 = cropperInstanceRef.current) === null || _cropperInstanceRef$c6 === void 0 ? void 0 : _cropperInstanceRef$c6.getCropperSelection()) !== null && _cropperInstanceRef$c5 !== void 0 ? _cropperInstanceRef$c5 : null
+    };
+  });
+  // handle dragMode
+  useEffect(function () {
+    if (dragMode) {
+      setDragMode(dragMode);
+    }
+  }, [dragMode]);
+  useEffect(function () {
+    if (canvas) {
+      setCanvas(canvas);
+    }
+  }, [canvas]);
+  useEffect(function () {
+    if (selection) {
+      setSelection(selection);
+    }
+  }, [selection]);
+  useEffect(function () {
+    if (cropperInstanceRef.current) {
+      var imgDom = cropperInstanceRef.current.getCropperImage();
+      var selectionDom = cropperInstanceRef.current.getCropperSelection();
+      if (!src) {
+        imgDom === null || imgDom === void 0 || imgDom.setAttribute('src', src);
+      } else {
+        selectionDom === null || selectionDom === void 0 || selectionDom.$reset();
+        selectionDom === null || selectionDom === void 0 || selectionDom.setAttribute('hidden', 'true');
+      }
+    }
+  }, [src]);
+  useEffect(function () {
+    if (cropperRef.current && !cropperInstanceRef.current) {
+      cropperInstanceRef.current = new Cropper(cropperRef.current);
+      var img = cropperInstanceRef.current.getCropperImage();
+      var cropperCanvas = cropperInstanceRef.current.getCropperCanvas();
+      cropperCanvas === null || cropperCanvas === void 0 || cropperCanvas.$addStyles(":host { height: 100%; }");
+      img === null || img === void 0 || img.$ready(function () {
+        img.setAttribute('crossOrigin', 'Anonymous');
+        // 缓存图片初始transform
+        imgTransformRef.current = img.$getTransform();
+        initializeOptions();
+      });
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: wrapperClass,
+      style: style,
+      children: /*#__PURE__*/_jsx("img", {
+        ref: cropperRef,
+        src: src,
+        alt: alt
+      })
+    }), /*#__PURE__*/_jsx(Toolbar, {
+      onAction: handleAction
+    })]
+  });
+});
+export default RCropper;

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

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import type Cropper from 'cropperjs';
+import type { CropperGrid, CropperSelection, CropperImage, CropperCanvas, CropperHandle } from 'cropperjs';
+export declare type RCropperGrid = Partial<Pick<CropperGrid, 'rows' | 'columns'>>;
+export declare type RCropperSelection = Partial<Pick<CropperSelection, 'x' | 'y' | 'width' | 'height' | 'aspectRatio' | 'initialAspectRatio' | 'zoomable' | 'resizable'>>;
+export declare type RCropperImage = Partial<Pick<CropperImage, 'rotatable' | 'scalable' | 'skewable' | 'translatable'>>;
+export declare type RCropperCanvas = Partial<Pick<CropperCanvas, 'scaleStep' | 'disabled'>>;
+export interface RCropperEvents {
+    onCrop?(_src: string | undefined, _file?: File): void;
+    onZoom?(imgData: number[] | undefined): void;
+    onRotate?(imgData: number[] | undefined): void;
+    onFlip?(imgData: number[] | undefined): void;
+    onReset?(imgData: number[] | undefined): void;
+    onCancelCrop?(selectionData: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+}
+export interface RCropperActionHandlers {
+    handleCrop: () => Promise<void>;
+    handleZoomIn: () => void;
+    handleZoomOut: () => void;
+    handleRotateLeft: () => void;
+    handleRotateRight: () => void;
+    handleFlipX: () => void;
+    handleFlipY: () => void;
+    handleReset: () => void;
+    handleCancelCrop: () => void;
+}
+export interface RCropperRef {
+    cropper: Cropper | null;
+    image: CropperImage | null;
+    canvas: CropperCanvas | null;
+    selection: CropperSelection | null;
+}
+export interface RCropperProps extends RCropperEvents {
+    /**
+     * 图片的源地址
+     * @description 可以是本地图片路径或网络图片URL
+     */
+    src: string;
+    alt?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * 拖拽模式
+     * @default 'crop'
+     * @description 'crop' - 裁剪模式, 'move' - 移动模式, 'none' - 禁用拖拽
+     */
+    dragMode?: 'crop' | 'move' | 'none';
+    grid?: RCropperGrid;
+    /**
+     * 裁剪区域的配置
+     * @description 可以设置裁剪区域的宽度、高度、纵横比等属性
+     */
+    selection?: RCropperSelection;
+    /**
+     * 图片的配置
+     * @description 可以设置图片的旋转、缩放、倾斜、平移等属性
+     */
+    image?: RCropperImage;
+    /**
+     * 画布的配置
+     * @description 可以设置画布的缩放步长、禁用状态等属性
+     */
+    canvas?: RCropperCanvas;
+}
+export declare type RCropperElement = CropperCanvas | CropperGrid | CropperSelection | CropperImage | CropperHandle | null;

package/dist/esm/RCropper/interface.js

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

package/dist/esm/RCropper/styles/toolbar.less

@@ -0,0 +1,25 @@
+.toolbar {
+  display: flex;
+  background-color: rgba(0, 0, 0, 50%);
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+
+  button {
+    background-color: transparent;
+    border-width: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    // width: 32px;
+    // height: 32px;
+
+    &:hover {
+      background-color: #0074d9;
+    }
+  }
+
+  .icon > path {
+    fill: #fff;
+  }
+}

package/dist/esm/RCropper/toolbar.d.ts

@@ -0,0 +1,5 @@
+import './styles/toolbar.less';
+declare const Toolbar: ({ onAction }: {
+    onAction: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Toolbar;

package/dist/esm/RCropper/toolbar.js

@@ -0,0 +1,74 @@
+// import { ReactComponent as CropIcon } from './svgIcons/crop.svg';
+// import { ReactComponent as FlipHIcon } from './svgIcons/flip_h.svg';
+// import { ReactComponent as FlipVIcon } from './svgIcons/flip_v.svg';
+// import { ReactComponent as OkIcon } from './svgIcons/ok.svg';
+// import { ReactComponent as ResetIcon } from './svgIcons/reset.svg';
+// import { ReactComponent as RotateLeftIcon } from './svgIcons/rotate_l.svg';
+// import { ReactComponent as RotateRightIcon } from './svgIcons/rotate_r.svg';
+// import { ReactComponent as ZoomInIcon } from './svgIcons/zoom_in.svg';
+// import { ReactComponent as ZoomOutIcon } from './svgIcons/zoom_out.svg';
+import "./styles/toolbar.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Toolbar = function Toolbar(_ref) {
+  var onAction = _ref.onAction;
+  var handleCancelCrop = onAction.handleCancelCrop,
+    handleCrop = onAction.handleCrop,
+    handleZoomIn = onAction.handleZoomIn,
+    handleZoomOut = onAction.handleZoomOut,
+    handleRotateLeft = onAction.handleRotateLeft,
+    handleRotateRight = onAction.handleRotateRight,
+    handleReset = onAction.handleReset,
+    handleFlipX = onAction.handleFlipX,
+    handleFlipY = onAction.handleFlipY;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "toolbar",
+    children: [/*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleCancelCrop,
+      title: "\u9690\u85CF\u9009\u533A",
+      children: "\u9690\u85CF\u9009\u533A"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleZoomIn,
+      title: "\u653E\u5927",
+      children: "\u653E\u5927"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleZoomOut,
+      title: "\u7F29\u5C0F",
+      children: "\u7F29\u5C0F"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleFlipX,
+      title: "\u6C34\u5E73\u7FFB\u8F6C",
+      children: "\u6C34\u5E73\u7FFB\u8F6C"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleFlipY,
+      title: "\u5782\u76F4\u7FFB\u8F6C",
+      children: "\u5782\u76F4\u7FFB\u8F6C"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleRotateLeft,
+      title: "\u5411\u5DE6\u65CB\u8F6C",
+      children: "\u5411\u5DE6\u65CB\u8F6C"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleRotateRight,
+      title: "\u5411\u53F3\u65CB\u8F6C",
+      children: "\u5411\u53F3\u65CB\u8F6C"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleReset,
+      title: "\u91CD\u7F6E",
+      children: "\u91CD\u7F6E"
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleCrop,
+      title: "\u88C1\u526A",
+      children: "\u88C1\u526A"
+    })]
+  });
+};
+export default Toolbar;

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

@@ -0,0 +1,5 @@
+import { Props } from 'react-rnd';
+declare const RndDrag: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default RndDrag;
+export type { Props as RndDragProps } from 'react-rnd';
+export type { DraggableData, Position, Grid, RndDragCallback, RndDragEvent, RndResizeStartCallback, HandleStyles } from 'react-rnd';

package/dist/esm/RndDrag/index.js

@@ -0,0 +1,26 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"];
+import { Rnd } from 'react-rnd';
+import { useContext } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from "../ConfigProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+var RndDrag = function RndDrag(props) {
+  var children = props.children,
+    className = props.className,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigContext),
+    prefixCls = _useContext.prefixCls,
+    getPrefixCls = _useContext.getPrefixCls;
+  var classname = getPrefixCls('rnd-drag');
+  var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-rnd-drag"), !!prefixCls), classname, className);
+  return /*#__PURE__*/_jsx(Rnd, _objectSpread(_objectSpread({
+    className: wrapperClass,
+    bounds: "parent"
+  }, rest), {}, {
+    children: children
+  }));
+};
+export default RndDrag;

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

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

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { Props } from 'react-wordcloud';
 export declare type WordCloudProps = Props & {
     className?: string;
 };
-declare const WordCloud: (props: WordCloudProps) => JSX.Element;
+declare const WordCloud: (props: WordCloudProps) => import("react/jsx-runtime").JSX.Element;
 export default WordCloud;

package/dist/esm/commonStyle/index.less

@@ -1 +1 @@
-@prefix: pui;
+@prefix: pui;

package/dist/esm/index.d.ts

@@ -8,7 +8,7 @@ export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as ConfigProvider } from './ConfigProvider';
 export { default as PictureCard } from './PictureCard';
 export type { PictureCardProps } from './PictureCard';
-export { default as Loading } from './Loading';
+export { default as Loading, useLoading } from './Loading';
 export type { LoadingProps } from './Loading/interface';
 export { default as NoData } from './NoData';
 export type { NoDataProps } from './NoData/interface';
@@ -38,3 +38,11 @@ export type { WordCloudProps } from './WordCloud';
 export { default as WordCloud } from './WordCloud';
 export type { InfiniteScrollListProps } from './InfiniteScrollList';
 export { default as InfiniteScrollList } from './InfiniteScrollList';
+export { default as RndDrag } from './RndDrag';
+export type { RndDragProps, DraggableData, Position, Grid, RndDragCallback, RndDragEvent, RndResizeStartCallback, HandleStyles } from './RndDrag';
+export { default as RCropper } from './RCropper';
+export type { RCropperProps, RCropperEvents, RCropperElement, RCropperRef, RCropperImage, RCropperCanvas, RCropperSelection, RCropperGrid, RCropperActionHandlers, } from './RCropper/interface';
+export { default as IPAddress } from './IPAddress';
+export type { IPAddressProps } from './IPAddress';
+export { default as IconFont } from './IconFont';
+export type { IconFontProps } from './IconFont';

package/dist/esm/index.js

@@ -4,7 +4,7 @@ export { default as AuthComponent } from "./AuthComponent";
 export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as ConfigProvider } from "./ConfigProvider";
 export { default as PictureCard } from "./PictureCard";
-export { default as Loading } from "./Loading";
+export { default as Loading, useLoading } from "./Loading";
 export { default as NoData } from "./NoData";
 export { default as DInput } from "./DInput";
 export { default as DSelect } from "./DSelect";
@@ -18,4 +18,8 @@ export { default as ModalForm } from "./ModalForm";
 export { default as ColorPicker } from "./ColorPicker";
 export { default as ScrollNumber } from "./ScrollNumber";
 export { default as WordCloud } from "./WordCloud";
-export { default as InfiniteScrollList } from "./InfiniteScrollList";
+export { default as InfiniteScrollList } from "./InfiniteScrollList";
+export { default as RndDrag } from "./RndDrag";
+export { default as RCropper } from "./RCropper";
+export { default as IPAddress } from "./IPAddress";
+export { default as IconFont } from "./IconFont";

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-picture-card{display:inline-block;padding:10px;transition:box-shadow .3s linear}.pui-picture-card .info{margin-top:10px}.pui-picture-card-bordered{border:1px solid rgba(0,0,0,.06)}.pui-picture-card-hoverable:hover{border-color:transparent;box-shadow:0 1px 2px -2px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.12),0 5px 12px 4px rgba(0,0,0,.09);cursor:pointer}.pui-picture-card.horizontal{display:flex;justify-content:space-around}.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>.ant-form-item{margin-bottom:24px;margin-right:0;min-height:32px}.pui-form .ant-input-number,.pui-form .ant-picker{width:100%}.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 .form-wrapper>.ant-form-item,.pui-form.ant-form-inline.inlineVertical .form-wrapper>.ant-form-item{padding-right:16px}.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}.pui-infinite-scroll-wrapper .ant-list .ant-row{margin-right:0!important}.scroll-container{position:relative}.scroll-container .backtop{right:50px}.scroll-container .up{background:#007aff;border-radius:3px;color:#fff;text-align:center}
+.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-picture-card{display:inline-block;padding:10px;transition:box-shadow .3s linear}.pui-picture-card .info{margin-top:10px}.pui-picture-card-bordered{border:1px solid rgba(0,0,0,.06)}.pui-picture-card-hoverable:hover{border-color:transparent;box-shadow:0 1px 2px -2px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.12),0 5px 12px 4px rgba(0,0,0,.09);cursor:pointer}.pui-picture-card.horizontal{display:flex;justify-content:space-around}.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>.ant-form-item{margin-bottom:24px;margin-right:0;min-height:32px}.pui-form .ant-input-number,.pui-form .ant-picker{width:100%}.pui-form.ant-form-horizontal .form-wrapper>.ant-form-item:last-child,.pui-form.ant-form-vertical .form-wrapper>.ant-form-item:last-child{margin-bottom:0}.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 .form-wrapper>.ant-form-item,.pui-form.ant-form-inline.inlineVertical .form-wrapper>.ant-form-item{padding-right:16px}.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}.pui-infinite-scroll-wrapper .ant-list .ant-row{margin-right:0!important}.scroll-container{position:relative}.scroll-container .backtop{right:50px}.scroll-container .up{background:#007aff;border-radius:3px;color:#fff;text-align:center}.toolbar{background-color:rgba(0,0,0,.5);color:#fff;justify-content:center}.toolbar,.toolbar button{align-items:center;display:flex}.toolbar button{background-color:transparent;border-width:0;cursor:pointer}.toolbar button:hover{background-color:#0074d9}.toolbar .icon>path{fill:#fff}.pui-ip-address{border:1px solid #d9d9d9;border-radius:2px;transition:all .3s}.pui-ip-address.small{height:24px}.pui-ip-address.large{padding:6.5px 10px}.pui-ip-address.middle{padding:4px 10px}.pui-ip-address.disabled{background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;color:rgba(0,0,0,.25);cursor:not-allowed;opacity:1}.pui-ip-address.disabled:hover{border-color:#d9d9d9}.pui-ip-address:hover{border-color:#4d90ff}.pui-ip-address:focus-within{border-color:#40a9ff;box-shadow:0 0 0 2px rgba(24,144,255,.2)}.pui-ip-address input{font-feature-settings:"tnum","tnum";background:none;border:none;box-sizing:border-box;color:#000000d9;display:inline-block;font-size:14px;font-variant:tabular-nums;line-height:1.5715;margin:0;outline:0;padding:0;position:relative;text-align:center}.pui-ip-address input[disabled]{color:inherit;cursor:not-allowed}