@para-ui/core 4.0.28 → 4.0.30

package/ContentBox/index.d.ts

@@ -0,0 +1,33 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import './index.scss';
+import { LoadingProps } from '../Loading';
+import { EmptyProps } from '../Empty';
+export interface ContentBoxProps {
+    /** className */
+    className?: string;
+    /** className */
+    scrollClassName?: string;
+    /** style */
+    scrollStyle?: CSSProperties;
+    /** style */
+    style?: CSSProperties;
+    /** 是否正在加载 */
+    loading?: boolean;
+    /** loading 属性*/
+    loadingProps?: LoadingProps;
+    /** loading 是否显示在内容上方*/
+    loadingOverlay?: boolean;
+    /** empty */
+    empty?: boolean;
+    /** 是否支持滚动 */
+    scroll?: boolean;
+    /** emptyProps */
+    emptyProps?: EmptyProps;
+    children?: ReactNode;
+    /** 自定义加载组件 */
+    loadingComponent?: ReactNode;
+    /** 自定义空组件 */
+    emptyComponent?: ReactNode;
+}
+declare const ContentBox: React.ForwardRefExoticComponent<ContentBoxProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentBox;

package/ContentBox/index.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import { Loading } from '../Loading/index.js';
+import Empty from '../Empty/index.js';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import '@para-ui/icons/LoadingF';
+import '../_verture/useFormatMessage-1fc7c957.js';
+import '../_verture/index-ca413216.js';
+import '@paraview/lib';
+import '../_verture/useGlobalProps-4ae1a007.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-content-box {\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-content-box-scroll {\n  overflow: auto;\n  width: 100%;\n  max-height: 100%;\n  position: relative;\n}\n.paraui-v4-content-box-fill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n.paraui-v4-content-box-loading {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 101;\n  background-color: white;\n  opacity: 0.7;\n}";
+styleInject(css_248z);
+
+const ContentBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    style,
+    loading,
+    empty,
+    scroll,
+    children,
+    scrollClassName,
+    scrollStyle,
+    emptyProps,
+    loadingComponent,
+    loadingOverlay = true,
+    loadingProps,
+    emptyComponent
+  } = _ref;
+  const renderLoadingContent = () => {
+    if (loading) {
+      return loadingComponent ? jsx("div", Object.assign({
+        className: clsx("".concat($prefixCls, "-content-box-loading"), loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.className),
+        style: Object.assign(Object.assign({}, loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.style), {
+          opacity: loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.opacity
+        })
+      }, {
+        children: loadingComponent
+      })) : jsx(Loading, Object.assign({}, loadingProps), loadingOverlay ? 'loading' : 'loading-overlay');
+    }
+    return null;
+  };
+  const renderEmptyContent = () => {
+    if (!loading && empty) {
+      return jsx("div", Object.assign({
+        className: "".concat($prefixCls, "-content-box-fill")
+      }, {
+        children: emptyComponent ? emptyComponent : jsx(Empty, Object.assign({}, emptyProps))
+      }));
+    }
+    return null;
+  };
+  const renderContent = () => {
+    const loadingContent = renderLoadingContent();
+    // 如果loadingOverlay为false, loading时不显示内容
+    if (!loadingOverlay && loadingContent) {
+      return jsx("div", Object.assign({
+        className: "".concat($prefixCls, "-content-box-fill")
+      }, {
+        children: loadingContent
+      }));
+    }
+    const emptyContent = renderEmptyContent();
+    if (emptyContent) {
+      return emptyContent;
+    }
+    return scroll ? jsx("div", Object.assign({
+      className: clsx("".concat($prefixCls, "-content-box-scroll"), scrollClassName),
+      style: scrollStyle
+    }, {
+      children: children
+    })) : jsx(Fragment, {
+      children: children
+    });
+  };
+  return jsxs("div", Object.assign({
+    ref: ref,
+    className: clsx("".concat($prefixCls, "-content-box"), className),
+    style: style
+  }, {
+    children: [renderContent(), renderLoadingContent()]
+  }));
+});
+ContentBox.displayName = 'ContentBox';
+
+export { ContentBox as default };

package/README.md

@@ -1,3 +1,10 @@
+## 版本: 4.0.30
+    para-ui/core@4.0.30 发布
+        【范围输入框-RangeInput】新增组件范围输入框
+
+## 版本: 4.0.29
+        【展示内容容器-ContentBox】新增展示内容容器-ContentBox
+
 ## 版本: 4.0.28
         【标题-Title】标题折叠内容新增Children渲染，新增默认是否展开参数，调整折叠样式
 

package/RangeInput/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @author linhd
+ * @date 2024/7/29 10:21
+ * @description 范围输入框
+ */
+import React, { FunctionComponent, ReactNode } from 'react';
+import { LabelTooltipProps } from '../Label';
+import { InputNumberProps } from '../InputNumber';
+import { HelperTextDetailProps } from '../HelperText';
+import { TooltipProps } from '../Tooltip';
+import './index.scss';
+export interface RangeInputProps extends HelperTextDetailProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 标题 */
+    label?: ReactNode;
+    /** 帮组提示信息 */
+    labelTooltip?: LabelTooltipProps;
+    /** 尺寸 */
+    size?: 'small' | 'medium' | 'large';
+    /** 是否必填 */
+    required?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean | [boolean, boolean];
+    /**
+     * 禁用提示
+     */
+    disabledTooltip?: TooltipProps | [TooltipProps, TooltipProps];
+    /** 默认值 不受控 */
+    defaultValue?: [number | null, number | null];
+    /** 默认值 */
+    value?: [number | null, number | null];
+    /** 中间符号 */
+    separator?: ReactNode;
+    /** 单位 */
+    unit?: ReactNode;
+    /** 提示语 */
+    placeholder?: ReactNode | [ReactNode, ReactNode];
+    /** 输入框其他参数 */
+    otherProps?: [InputNumberProps, InputNumberProps];
+    /**
+     * 改变值
+     * */
+    onChange?: (val: [number | null, number | null], index: number) => void;
+    /** 失去焦点 */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>, index: number) => void;
+    /** 得到焦点 */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>, index: number) => void;
+    /** 回车事件 */
+    onEnter?: (event: React.KeyboardEventHandler<HTMLInputElement>, index: number) => void;
+}
+export declare const RangeInput: FunctionComponent<RangeInputProps>;
+export default RangeInput;

package/RangeInput/index.js

@@ -0,0 +1,169 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import Label from '../Label/index.js';
+import { InputNumber } from '../InputNumber/index.js';
+import HelperText from '../HelperText/index.js';
+import clsx from 'clsx';
+import { Tooltip } from '../Tooltip/index.js';
+import { DeepClone } from '@paraview/lib';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '../Help/index.js';
+import '@para-ui/icons/Help';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Forbid';
+import 'rc-input-number';
+import '@para-ui/icons/Up';
+import '@para-ui/icons/Down';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-range-input {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: inline-block;\n  width: 100%;\n}\n.paraui-v4-range-input > .range-input-content {\n  border: 1px solid;\n  border-radius: 4px;\n  border-color: rgb(212, 218, 227);\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-range-input > .range-input-content:hover {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-range-input > .range-input-content > .paraui-v4-input-number > .input-number-content {\n  border: none;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-range-input > .range-input-content > .separator {\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  padding-left: 10px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  line-height: 1;\n}\n.paraui-v4-range-input > .range-input-content > .unit {\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  padding: 0 10px;\n}\n.paraui-v4-range-input.paraui-v4-range-input-focus > .range-input-content {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-range-input.paraui-v4-range-input-disabled > .range-input-content {\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-range-input.paraui-v4-range-input-disabled > .range-input-content:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-range-input.paraui-v4-range-input-disabled > .range-input-content > .paraui-v4-input-number > .input-number-content {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-range-input.paraui-v4-range-input-error > .range-input-content {\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-range-input.paraui-v4-range-input-error > .range-input-content:hover {\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-range-input.paraui-v4-range-input-small > .range-input-content {\n  height: 28px;\n}\n.paraui-v4-range-input.paraui-v4-range-input-small > .range-input-content > .paraui-v4-input-number .input-number-content {\n  height: 26px;\n}\n.paraui-v4-range-input.paraui-v4-range-input-medium > .range-input-content {\n  height: 28px;\n}\n.paraui-v4-range-input.paraui-v4-range-input-medium > .range-input-content > .paraui-v4-input-number .input-number-content {\n  height: 26px;\n}\n.paraui-v4-range-input.paraui-v4-range-input-large > .range-input-content {\n  height: 32px;\n}\n.paraui-v4-range-input.paraui-v4-range-input-large > .range-input-content > .paraui-v4-input-number .input-number-content {\n  height: 30px;\n}";
+styleInject(css_248z);
+
+const RangeInput = props => {
+  const {
+    className,
+    style,
+    label,
+    labelTooltip,
+    size = 'large',
+    required = false,
+    disabled = false,
+    disabledTooltip,
+    defaultValue,
+    value,
+    error = false,
+    hideErrorDom,
+    helperText = '',
+    separator = '~',
+    unit,
+    placeholder,
+    onFocus,
+    onBlur,
+    onEnter,
+    onChange,
+    otherProps
+  } = props;
+  const [valueCom, setValueCom] = useState([null, null]);
+  const [focus, setFocus] = useState(false); // 是否获取焦点
+  useEffect(() => {
+    if (props.defaultValue !== undefined) setValueCom(props.defaultValue);
+  }, []);
+  // 监听value
+  useEffect(() => {
+    if (value !== undefined) {
+      setValueCom(value);
+    }
+  }, [value]);
+  /** 处理placeholder */
+  const handlePlaceholder = index => {
+    if (placeholder && placeholder instanceof Array) {
+      return placeholder[index];
+    }
+    return placeholder;
+  };
+  /** 处理disabled */
+  const handleDisabled = index => {
+    if (disabled && disabled instanceof Array) {
+      return disabled[index];
+    }
+    return disabled;
+  };
+  /** 得到焦点 */
+  const onFocusCom = index => event => {
+    setFocus(true);
+    onFocus && onFocus(event, index);
+  };
+  /** 失去焦点 */
+  const onBlurCom = index => event => {
+    setFocus(false);
+    onBlur && onBlur(event, index);
+    if (valueCom[0] !== null && valueCom[1] !== null) {
+      if (valueCom[0] > valueCom[1]) {
+        onChangeCom(index)(null);
+      }
+    }
+  };
+  /** 回车事件 */
+  const onEnterCom = index => event => {
+    onEnter && onEnter(event, index);
+  };
+  /** change事件 */
+  const onChangeCom = index => val => {
+    const valHandle = valueCom ? DeepClone(valueCom) : [];
+    valHandle[index] = val;
+    if (props.value === undefined) {
+      setValueCom(valHandle);
+    }
+    onChange && onChange(valHandle, index);
+  };
+  const contentRender = () => {
+    return jsxs("div", Object.assign({
+      className: 'range-input-content'
+    }, {
+      children: [jsx(InputNumber, Object.assign({}, otherProps && otherProps[0], {
+        btnMode: "none",
+        hideErrorDom: true,
+        placeholder: handlePlaceholder(0),
+        disabled: handleDisabled(0),
+        disabledTooltip: disabledTooltip === null || disabledTooltip === void 0 ? void 0 : disabledTooltip[0],
+        value: valueCom[0],
+        onFocus: onFocusCom(0),
+        onBlur: onBlurCom(0),
+        onPressEnter: onEnterCom(0),
+        onChange: onChangeCom(0)
+      })), jsx("span", Object.assign({
+        className: 'separator'
+      }, {
+        children: separator
+      })), jsx(InputNumber, Object.assign({}, otherProps && otherProps[1], {
+        btnMode: "none",
+        hideErrorDom: true,
+        placeholder: handlePlaceholder(1),
+        disabled: handleDisabled(1),
+        disabledTooltip: disabledTooltip === null || disabledTooltip === void 0 ? void 0 : disabledTooltip[1],
+        value: valueCom[1],
+        onFocus: onFocusCom(1),
+        onBlur: onBlurCom(1),
+        onPressEnter: onEnterCom(1),
+        onChange: onChangeCom(1)
+      })), unit && jsx("span", Object.assign({
+        className: 'unit'
+      }, {
+        children: unit
+      }))]
+    }));
+  };
+  /** 处理内容 */
+  const handleContent = () => {
+    if (disabledTooltip && !(disabledTooltip instanceof Array)) {
+      return jsx(Tooltip, Object.assign({
+        disabled: true
+      }, disabledTooltip, {
+        children: contentRender()
+      }));
+    }
+    return contentRender();
+  };
+  return jsxs("div", Object.assign({
+    className: clsx(className, "".concat($prefixCls, "-range-input"), "".concat($prefixCls, "-range-input-").concat(size), {
+      ["".concat($prefixCls, "-range-input-focus")]: focus,
+      ["".concat($prefixCls, "-range-input-disabled")]: disabled === true || handleDisabled(0) && handleDisabled(1),
+      ["".concat($prefixCls, "-range-input-error")]: error
+    }),
+    style: style
+  }, {
+    children: [jsx(Label, Object.assign({
+      label: label,
+      required: required
+    }, labelTooltip)), handleContent(), jsx(HelperText, {
+      className: "range-input-error-text",
+      error: error,
+      helperText: helperText,
+      hideErrorDom: hideErrorDom
+    })]
+  }));
+};
+
+export { RangeInput, RangeInput as default };

package/Transfer/index.js

@@ -8,6 +8,7 @@ import ExpandLess from '@para-ui/icons/Up';
 import Down from '@para-ui/icons/Down';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { Search } from '../Search/index.js';
 import SearchIcon from '@para-ui/icons/Search';
 import AutoTips from '../AutoTips/index.js';
@@ -27,6 +28,7 @@ import '../_verture/usePopupContainer-635f66f4.js';
 import 'dayjs';
 import '@paraview/lib';
 import '../_verture/index-ca413216.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../TextField/index.js';
 import '../Label/index.js';
 import '../Help/index.js';
@@ -59,8 +61,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh,
-  en
+  zh: zh,
+  en: en
 };
 
 var useClick = function useClick(callback, doubleCallback) {
@@ -88,32 +90,36 @@ var useClick = function useClick(callback, doubleCallback) {
   };
 };
 
-const Box = props => {
-  const {
-    title,
-    data,
-    onSearch,
-    onchange,
-    onMove,
-    queryAll,
-    inverse,
-    direction,
-    fluctuationPosition,
-    fluctuationOrther,
-    onEndSort,
-    multiple,
-    rightIcon,
-    style,
-    customKey
-  } = props;
-  const intl = useFormatMessage('Transfer', localeJson);
-  const [checkCount, setCheckCount] = useState([]);
-  const [disabledCount, setDisabledCount] = useState(0);
-  const ref = useRef();
-  useEffect(() => {
-    const arr = [];
-    let count = 0;
-    data.forEach((item, index) => {
+var Box = function Box(props) {
+  var title = props.title,
+    data = props.data,
+    onSearch = props.onSearch,
+    onchange = props.onchange,
+    onMove = props.onMove,
+    queryAll = props.queryAll,
+    inverse = props.inverse,
+    direction = props.direction,
+    fluctuationPosition = props.fluctuationPosition,
+    fluctuationOrther = props.fluctuationOrther,
+    onEndSort = props.onEndSort,
+    multiple = props.multiple,
+    rightIcon = props.rightIcon,
+    style = props.style,
+    customKey = props.customKey;
+  var intl = useFormatMessage('Transfer', localeJson);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    checkCount = _useState2[0],
+    setCheckCount = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    disabledCount = _useState4[0],
+    setDisabledCount = _useState4[1];
+  var ref = useRef();
+  useEffect(function () {
+    var arr = [];
+    var count = 0;
+    data.forEach(function (item, index) {
       if (item.checked && !item.hide) {
         arr.push(index);
       }
@@ -124,29 +130,29 @@ const Box = props => {
     setDisabledCount(count);
     setCheckCount(arr);
   }, [data]);
-  useEffect(() => {
+  useEffect(function () {
     if (direction == 'right') {
       new Sortable(ref.current, {
         animation: 180,
         ghostClass: 'blue-background-class',
         dragClass: 'drag-item',
         easing: 'step-start',
-        onEnd: evt => {
+        onEnd: function onEnd(evt) {
           onEndSort === null || onEndSort === void 0 ? void 0 : onEndSort(evt.oldIndex, evt.newIndex);
         }
       });
     }
   }, []);
-  const handler = useClick((e, index, item) => {
+  var handler = useClick(function (e, index, item) {
     if (item.disabled) return;
     onchange(e, !item.checked, index, direction, multiple);
-  }, (e, index, item) => {
+  }, function (e, index, item) {
     if (item === null || item === void 0 ? void 0 : item.disabled) return;
     onchange(e, true, index, direction, false);
     onMove(direction === 'right' ? 'left' : 'right');
   });
-  const itemStyle = data => {
-    const stlye = {};
+  var itemStyle = function itemStyle(data) {
+    var stlye = {};
     if (data === null || data === void 0 ? void 0 : data.tagColor) {
       stlye.borderLeft = "4px solid ".concat(data.tagColor);
     }
@@ -171,15 +177,15 @@ const Box = props => {
       showBtn: false,
       rightIcon: jsx(SearchIcon, {}),
       rightIconExist: true,
-      onChange: val => {
+      onChange: function onChange(val) {
         onSearch(val, direction);
       },
-      onClickRightIcon: val => {
+      onClickRightIcon: function onClickRightIcon(val) {
         onSearch(val, direction);
       },
-      onEnter: event => {
+      onEnter: function onEnter(event) {
         var _a;
-        const val = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value) || '';
+        var val = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value) || '';
         onSearch(val, direction);
       },
       allowClear: false
@@ -187,11 +193,11 @@ const Box = props => {
       className: "context",
       ref: ref
     }, {
-      children: data.map((item, index) => {
+      children: data.map(function (item, index) {
         return jsxs("div", Object.assign({
           className: clsx('item', (item === null || item === void 0 ? void 0 : item.tagColor) && 'item-border', (item === null || item === void 0 ? void 0 : item.disabled) && 'item-disabled', (item === null || item === void 0 ? void 0 : item.checked) && 'item-checked', fluctuationPosition === index && 'item-fluctuation', fluctuationOrther === index && 'item-fluctuationOrther'),
           style: itemStyle(item),
-          onClick: e => {
+          onClick: function onClick(e) {
             handler(e, index, item);
           }
         }, {
@@ -223,7 +229,7 @@ const Box = props => {
         children: [jsx(Button, Object.assign({
           variant: "text",
           className: "".concat(checkCount.length === data.length - disabledCount && data.length > 0 ? 'btn-on' : ''),
-          onClick: () => {
+          onClick: function onClick() {
             queryAll(checkCount.length !== data.length - disabledCount, direction);
           }
         }, {
@@ -234,7 +240,7 @@ const Box = props => {
           variant: "text",
           className: "".concat(checkCount.length === 0 || checkCount.length === data.length - disabledCount ? 'btn-off' : ''),
           disabled: checkCount.length === 0 || checkCount.length === data.length - disabledCount,
-          onClick: () => {
+          onClick: function onClick() {
             inverse(direction);
           }
         }, {
@@ -250,7 +256,7 @@ const Box = props => {
     }))]
   }));
 };
-const Sortablejs = Sortable;
+var Sortablejs = Sortable;
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-transfer {\n  display: flex;\n  font-size: 14px;\n  user-select: none;\n}\n.paraui-v4-transfer .blue-background-class {\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-transfer .drag-item {\n  background: rgb(255, 255, 255) !important;\n  box-shadow: rgba(212, 218, 227, 0.4);\n}\n.paraui-v4-transfer .box {\n  border-radius: 4px;\n  border: 1px solid rgb(212, 218, 227);\n  overflow: hidden;\n}\n.paraui-v4-transfer .box .box-header {\n  background: rgb(247, 248, 250);\n  color: rgb(29, 33, 38);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 10px;\n  height: 36px;\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-transfer .box .count {\n  color: rgb(29, 33, 38);\n  letter-spacing: 1px;\n}\n.paraui-v4-transfer .box .context {\n  height: 400px;\n  overflow: auto;\n  margin-top: 4px;\n}\n.paraui-v4-transfer .box .context .item-fluctuation {\n  animation: flucturation 0.4s forwards;\n}\n.paraui-v4-transfer .box .context .item-fluctuationOrther {\n  animation: flucturationOrther 0.5s forwards;\n}\n.paraui-v4-transfer .box .context .item {\n  padding: 0px 10px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-transfer .box .context .item.item-checked:hover {\n  background-color: rgb(247, 248, 250) !important;\n}\n.paraui-v4-transfer .box .context .item.item-checked > .item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .context .item > .item-label {\n  flex: 1;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-transfer .box .context .item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-transfer .box .context .item.item-disabled:hover {\n  background: inherit;\n  cursor: no-drop;\n}\n.paraui-v4-transfer .box .context .item.item-disabled > .item-label {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .context .item .handle {\n  margin-left: 8px;\n  display: flex;\n  align-content: center;\n}\n.paraui-v4-transfer .box .context .item .handle .handle-line {\n  height: 12px;\n  border-left: 1px solid rgb(212, 218, 227);\n  margin: auto 10px auto 0;\n}\n.paraui-v4-transfer .box .context .item .handle svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-transfer .box .context .item .handle:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .context .item-border {\n  padding-left: 6px;\n}\n.paraui-v4-transfer .box .text-field-content {\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-transfer .box .footer {\n  display: flex;\n  align-items: center;\n  border-top: 1px solid rgb(212, 218, 227);\n  height: 36px;\n  justify-content: space-between;\n  padding: 0 10px;\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) button {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) button:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) .btn-off {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) .btn-off:hover {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) > button {\n  padding: 0;\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) > button:nth-child(2) {\n  margin-left: 16px;\n}\n.paraui-v4-transfer .moveBtn {\n  display: flex;\n  height: 500px;\n  flex-direction: column;\n  justify-content: center;\n  margin: 0 20px;\n}\n.paraui-v4-transfer .moveBtn > button {\n  background-color: rgb(46, 101, 230);\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-transfer .moveBtn .btn-left {\n  margin-top: 16px;\n}\n\n@keyframes flucturation {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(36px);\n  }\n}\n@keyframes flucturationOrther {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(-36px);\n  }\n}";
 styleInject(css_248z);