@para-ui/core 4.0.62 → 4.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/ComboSelect/index.js +3 -3
  2. package/DynamicMultiBox/index.js +210 -25
  3. package/DynamicMultiBox/interface.d.ts +30 -0
  4. package/Form/index.js +3 -3
  5. package/FormItem/index.js +3 -3
  6. package/README.md +9 -1
  7. package/Stepper/index.js +1 -1
  8. package/Switch/index.js +2 -2
  9. package/Table/index.js +432 -497
  10. package/TextEditor/index.js +3 -3
  11. package/Upload/index.js +15 -8
  12. package/Upload/interface.d.ts +2 -0
  13. package/index.js +1 -1
  14. package/package.json +1 -1
  15. package/umd/DynamicMultiBox.js +2 -2
  16. package/umd/Upload.js +2 -2
  17. /package/_verture/{index-0163a7b0.js → index-99984222.js} +0 -0
package/ComboSelect/index.js CHANGED
@@ -24,8 +24,6 @@ import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
24
24
  import { Search } from '../Search/index.js';
25
25
  import LoadingOutlined from '@para-ui/icons/LoadingF';
26
26
  import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
27
- import '../_verture/typeof-adeedc13.js';
28
- import '../_verture/slicedToArray-61604a6c.js';
29
27
  import '../Checkbox/index.js';
30
28
  import '../Help/index.js';
31
29
  import '@para-ui/icons/Help';
@@ -37,7 +35,6 @@ import '@para-ui/icons/UpTriangleF';
37
35
  import '@para-ui/icons/DownTriangleF';
38
36
  import '@para-ui/icons/Panel';
39
37
  import '../Empty/index.js';
40
- import '../_verture/defineProperty-6f62bb2a.js';
41
38
  import '../_verture/index-0f5ee6f7.js';
42
39
  import '../_verture/sortable.esm-76fe46a4.js';
43
40
  import '../Radio/index.js';
@@ -60,6 +57,9 @@ import '@para-ui/icons/DoubleRight';
60
57
  import '../ScrollBar/index.js';
61
58
  import '../_verture/useResizeObserver-edda059a.js';
62
59
  import '../_verture/toConsumableArray-599cd94a.js';
60
+ import '../_verture/slicedToArray-61604a6c.js';
61
+ import '../_verture/defineProperty-6f62bb2a.js';
62
+ import '../_verture/typeof-adeedc13.js';
63
63
  import '../_verture/index-8ac46bd9.js';
64
64
  import '../_verture/typeof-6ec38efd.js';
65
65
  import 'rc-tree';
package/DynamicMultiBox/index.js CHANGED
@@ -52,8 +52,6 @@ import '@para-ui/icons/Up';
52
52
  import '../MultiBox/index.js';
53
53
  import '@para-ui/icons/Internet';
54
54
  import '../Table/index.js';
55
- import '../_verture/typeof-adeedc13.js';
56
- import '../_verture/slicedToArray-61604a6c.js';
57
55
  import '../_verture/index-98ae8a30.js';
58
56
  import '@para-ui/icons/CheckCircleF';
59
57
  import '@para-ui/icons/WarningCircle';
@@ -61,7 +59,6 @@ import '@para-ui/icons/WarningCircleF';
61
59
  import '@para-ui/icons/ScreenF';
62
60
  import '@para-ui/icons/UpTriangleF';
63
61
  import '@para-ui/icons/DownTriangleF';
64
- import '../_verture/defineProperty-6f62bb2a.js';
65
62
  import '../Radio/index.js';
66
63
  import '../OperateBtn/index.js';
67
64
  import '@para-ui/icons/More';
@@ -76,6 +73,9 @@ import '../ScrollBar/index.js';
76
73
  import '../_verture/useResizeObserver-edda059a.js';
77
74
  import '../_verture/index-09404080.js';
78
75
  import '../_verture/toConsumableArray-599cd94a.js';
76
+ import '../_verture/slicedToArray-61604a6c.js';
77
+ import '../_verture/defineProperty-6f62bb2a.js';
78
+ import '../_verture/typeof-adeedc13.js';
79
79
  import '../_verture/index-8ac46bd9.js';
80
80
  import '../_verture/typeof-6ec38efd.js';
81
81
  import 'rc-tree';
@@ -395,7 +395,7 @@ var localeJson = {
395
395
  en
396
396
  };
397
397
 
398
- var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n width: 100%;\n position: relative;\n overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n display: flex;\n flex: 1;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n display: flex;\n align-items: center;\n min-width: 180px;\n margin-right: 10px;\n flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n flex: 0;\n min-width: 80px;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n width: 32px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n cursor: pointer;\n margin-right: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box {\n height: 24px;\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgb(247, 248, 250);\n border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 32px;\n height: 32px;\n cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n background: rgb(247, 248, 250);\n border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n width: 1px;\n height: 12px;\n background-color: rgb(212, 218, 227);\n margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n width: 100%;\n display: flex;\n align-items: flex-start;\n min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n display: flex;\n align-items: flex-start;\n min-width: 180px;\n margin-right: 10px;\n flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n flex: 0;\n box-sizing: content-box;\n align-items: center;\n height: 32px;\n min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 32px;\n background: rgb(247, 248, 250);\n border: 1px dashed rgb(212, 218, 227);\n border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n font-size: 14px;\n margin-left: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n background: rgb(240, 245, 255);\n border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n color: rgb(161, 168, 179);\n margin-right: 4px;\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n width: 140px;\n padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n font-size: 12px;\n color: rgb(161, 168, 179);\n line-height: 30px;\n padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n max-height: 320px;\n overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n padding: 0 10px;\n margin-bottom: 0;\n line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 36px;\n color: rgb(46, 101, 230);\n cursor: pointer;\n border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n width: 200px;\n padding: 16px 0;\n text-align: center;\n font-size: 12px;\n color: rgb(161, 168, 179);\n}";
398
+ var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n width: 100%;\n position: relative;\n overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n display: flex;\n flex: 1;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n display: flex;\n align-items: center;\n min-width: 180px;\n margin-right: 10px;\n flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n flex: 0;\n min-width: 80px;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n width: 32px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n cursor: pointer;\n margin-right: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel .svg-box {\n height: 24px;\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgb(247, 248, 250);\n border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel .svg-box svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel .svg-box svg:hover {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 32px;\n height: 32px;\n cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon:hover {\n background: rgb(247, 248, 250);\n border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon:hover svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .hidden-icon {\n display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .center-line {\n width: 1px;\n height: 12px;\n background-color: rgb(212, 218, 227);\n margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button.disabled-operation {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button.disabled-operation:hover {\n background: transparent;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button.disabled-operation:hover svg {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button .operation-text {\n margin-left: 4px;\n font-size: 12px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 {\n width: 112px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 {\n width: 152px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 {\n width: 192px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n width: 100%;\n display: flex;\n align-items: flex-start;\n min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n display: flex;\n align-items: flex-start;\n min-width: 180px;\n margin-right: 10px;\n flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n flex: 0;\n box-sizing: content-box;\n align-items: center;\n height: 32px;\n min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 32px;\n background: rgb(247, 248, 250);\n border: 1px dashed rgb(212, 218, 227);\n border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n font-size: 14px;\n margin-left: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n background: rgb(240, 245, 255);\n border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n color: rgb(161, 168, 179);\n margin-right: 4px;\n overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n width: 140px;\n padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n font-size: 12px;\n color: rgb(161, 168, 179);\n line-height: 30px;\n padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n max-height: 320px;\n overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n padding: 0 10px;\n margin-bottom: 0;\n line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 36px;\n color: rgb(46, 101, 230);\n cursor: pointer;\n border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n width: 200px;\n padding: 16px 0;\n text-align: center;\n font-size: 12px;\n color: rgb(161, 168, 179);\n}";
399
399
  styleInject(css_248z);
400
400
 
401
401
  const DynamicMultiBox = props => {
@@ -416,6 +416,7 @@ const DynamicMultiBox = props => {
416
416
  singleTitle,
417
417
  initValue,
418
418
  popoverClassName,
419
+ operationButtons = [],
419
420
  onChange,
420
421
  onAdd,
421
422
  onFilter,
@@ -613,6 +614,196 @@ const DynamicMultiBox = props => {
613
614
  }
614
615
  return bol;
615
616
  };
617
+ /**
618
+ * 创建操作按钮
619
+ */
620
+ const createOperationButton = (button, rowIndex, item) => {
621
+ const {
622
+ key,
623
+ icon,
624
+ text,
625
+ disabled,
626
+ onClick,
627
+ render,
628
+ className,
629
+ tooltip
630
+ } = button;
631
+ // 如果有自定义渲染方法，使用自定义渲染
632
+ if (render) {
633
+ return jsx("div", Object.assign({
634
+ className: "operator-column-icon operation-button ".concat(className || '')
635
+ }, {
636
+ children: render(rowIndex, item, valueList)
637
+ }), key);
638
+ }
639
+ // 判断是否禁用
640
+ const isDisabled = typeof disabled === 'function' ? disabled(rowIndex, item, valueList) : disabled;
641
+ // 创建按钮内容
642
+ const buttonContent = jsxs("div", Object.assign({
643
+ className: "operator-column-icon operation-button ".concat(className || '', " ").concat(isDisabled ? 'disabled-operation' : ''),
644
+ onClick: () => !isDisabled && onClick(rowIndex, item, valueList)
645
+ }, {
646
+ children: [icon, text && jsx("span", Object.assign({
647
+ className: "operation-text"
648
+ }, {
649
+ children: text
650
+ }))]
651
+ }));
652
+ // 如果有tooltip，添加tooltip
653
+ if (tooltip) {
654
+ return jsx(Tooltip, Object.assign({
655
+ disabled: isDisabled,
656
+ placement: tooltip.placement || 'top'
657
+ }, tooltip, {
658
+ children: buttonContent
659
+ }), key);
660
+ }
661
+ return buttonContent;
662
+ };
663
+ /**
664
+ * 渲染行操作按钮区域，按照顺序混排
665
+ */
666
+ const renderRowOperations = (rowIndex, item, showDeleteIcon, isAllHideDelBol) => {
667
+ // 收集所有可见的按钮元素
668
+ const allButtons = [];
669
+ // 按order排序操作按钮
670
+ const sortedButtons = [...operationButtons].sort((a, b) => {
671
+ return (a.order || 3) - (b.order || 3);
672
+ });
673
+ // 准备三个位置的按钮
674
+ const beforeDeleteButtons = [];
675
+ const betweenDeleteAndSortButtons = [];
676
+ const afterSortButtons = [];
677
+ const defaultButtons = [];
678
+ // 分配按钮到不同位置
679
+ sortedButtons.forEach(button => {
680
+ const buttonNode = createOperationButton(button, rowIndex, item);
681
+ const order = button.order !== undefined ? button.order : 3;
682
+ switch (order) {
683
+ case 0:
684
+ beforeDeleteButtons.push(buttonNode);
685
+ break;
686
+ case 1:
687
+ betweenDeleteAndSortButtons.push(buttonNode);
688
+ break;
689
+ case 2:
690
+ afterSortButtons.push(buttonNode);
691
+ break;
692
+ default:
693
+ defaultButtons.push(buttonNode);
694
+ break;
695
+ }
696
+ });
697
+ // 1. 添加删除按钮前的操作按钮
698
+ beforeDeleteButtons.forEach(button => {
699
+ allButtons.push(button);
700
+ });
701
+ // 2. 添加删除按钮
702
+ const deleteButton = jsx("div", Object.assign({
703
+ className: "operator-column-icon delete-icon ".concat(!showDeleteIcon || deleteDisable.includes((item === null || item === void 0 ? void 0 : item[rowKey]) || '') ? 'hidden-icon' : ''),
704
+ onClick: () => onDeleteEvent(rowIndex)
705
+ }, {
706
+ children: deleteRender ? deleteRender(rowIndex, item, valueList) : jsx(Delete, {})
707
+ }), "delete-button");
708
+ // 只有当删除按钮可见时才添加
709
+ if (showDeleteIcon && !deleteDisable.includes(item[rowKey])) {
710
+ allButtons.push(deleteButton);
711
+ }
712
+ // 3. 添加删除按钮和排序按钮之间的操作按钮
713
+ betweenDeleteAndSortButtons.forEach(button => {
714
+ allButtons.push(button);
715
+ });
716
+ // 4. 添加排序按钮（如果启用）
717
+ if (isSort && showDeleteIcon) {
718
+ const sortButton = jsx("div", Object.assign({
719
+ className: "sort-handler operator-column-icon ".concat(!showDeleteIcon ? 'hidden-icon' : '')
720
+ }, {
721
+ children: jsx(Drag, {})
722
+ }), "sort-handler");
723
+ allButtons.push(sortButton);
724
+ }
725
+ // 5. 添加排序按钮后的操作按钮
726
+ afterSortButtons.forEach(button => {
727
+ allButtons.push(button);
728
+ });
729
+ // 6. 添加默认位置的操作按钮
730
+ defaultButtons.forEach(button => {
731
+ allButtons.push(button);
732
+ });
733
+ // 渲染所有按钮和分隔线
734
+ // 简化逻辑：除了最后一个元素外，每个元素后面都添加分隔线
735
+ const elements = [];
736
+ allButtons.forEach((button, index) => {
737
+ elements.push(button);
738
+ // 如果不是最后一个按钮，添加分隔线
739
+ if (index < allButtons.length - 1) {
740
+ elements.push(jsx("div", Object.assign({
741
+ className: "center-line"
742
+ }, {
743
+ children: jsx("div", {
744
+ className: 'line'
745
+ })
746
+ }), "divider-".concat(index)));
747
+ }
748
+ });
749
+ return jsx(Fragment, {
750
+ children: elements
751
+ });
752
+ };
753
+ /**
754
+ * 计算操作列宽度类名
755
+ */
756
+ const getOperatorColumnClass = function (showDeleteIcon, isAllHideDelBol, rowIndex, item) {
757
+ let isHeader = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
758
+ // 是否只有一行且是第一行
759
+ const isSingleRow = valueList.length === 1 && rowIndex === 0;
760
+ let buttonCount = 0;
761
+ if (isHeader || !isSingleRow) {
762
+ // 头部或多行情况下，按照最大可能按钮数量计算
763
+ // 只要启用了删除功能（无论是否当前行可见），都计入按钮数量
764
+ if (keepLastItem ? valueList.length > 1 : true) {
765
+ buttonCount++; // 删除按钮
766
+ }
767
+ // 如果启用了排序，计入排序按钮
768
+ if (isSort) {
769
+ buttonCount++; // 排序按钮
770
+ }
771
+ // 计算自定义操作按钮数量 - 始终计算所有可能的按钮
772
+ buttonCount += (operationButtons === null || operationButtons === void 0 ? void 0 : operationButtons.length) || 0;
773
+ } else {
774
+ // 只有一行时，计算实际可见的按钮数量
775
+ // 删除按钮是否可见
776
+ if (showDeleteIcon && !deleteDisable.includes((item === null || item === void 0 ? void 0 : item[rowKey]) || '')) {
777
+ buttonCount++; // 删除按钮
778
+ }
779
+ // 排序按钮是否可见
780
+ if (isSort && showDeleteIcon) {
781
+ buttonCount++; // 排序按钮
782
+ }
783
+ // 计算实际可见的自定义操作按钮数量
784
+ buttonCount += (operationButtons === null || operationButtons === void 0 ? void 0 : operationButtons.length) || 0;
785
+ }
786
+ // 根据按钮数量返回对应的类名
787
+ return getColumnClassByCount(buttonCount);
788
+ };
789
+ /**
790
+ * 根据按钮数量获取对应的CSS类名
791
+ */
792
+ const getColumnClassByCount = count => {
793
+ switch (count) {
794
+ case 0:
795
+ case 1:
796
+ return 'operator-column-40';
797
+ case 2:
798
+ return 'operator-column-80';
799
+ case 3:
800
+ return 'operator-column-120';
801
+ case 4:
802
+ return 'operator-column-160';
803
+ default:
804
+ return 'operator-column-200';
805
+ }
806
+ };
616
807
  /**
617
808
  * 渲染表头
618
809
  * */
@@ -621,6 +812,13 @@ const DynamicMultiBox = props => {
621
812
  if (!(config === null || config === void 0 ? void 0 : config.length)) return null;
622
813
  const showDeleteIcon = keepLastItem ? valueList.length > 1 : true;
623
814
  const isAllHideDelBol = isAllHideDelete();
815
+ // 只有一行时，表头宽度class与内容区保持一致，均用实际按钮数计算
816
+ let headerClass = 'operator-column-40';
817
+ if (valueList.length === 1) {
818
+ headerClass = getOperatorColumnClass(showDeleteIcon, isAllHideDelBol, 0, valueList[0], false);
819
+ } else {
820
+ headerClass = getOperatorColumnClass(showDeleteIcon, isAllHideDelBol, 0, valueList[0], true);
821
+ }
624
822
  return jsxs("div", Object.assign({
625
823
  className: 'title-config'
626
824
  }, {
@@ -655,7 +853,7 @@ const DynamicMultiBox = props => {
655
853
  required: singleTitle === null || singleTitle === void 0 ? void 0 : singleTitle.required,
656
854
  label: singleTitle === null || singleTitle === void 0 ? void 0 : singleTitle.label
657
855
  }) : null, jsxs("div", Object.assign({
658
- className: "operator-column-40 ".concat(isSort && showDeleteIcon && !isAllHideDelBol ? 'operator-column-80' : '')
856
+ className: headerClass
659
857
  }, {
660
858
  children: [isSort && jsx("div", {
661
859
  className: 'blank-block'
@@ -678,7 +876,7 @@ const DynamicMultiBox = props => {
678
876
  }))]
679
877
  }))]
680
878
  }));
681
- }, [titleMode, fixedConfig, selectedConfig, isSort, isFilter, checked, onCheckChange, onRestoreDefault, rowKey, keepLastItem, valueList, deleteDisable]);
879
+ }, [titleMode, fixedConfig, selectedConfig, isSort, isFilter, checked, onCheckChange, onRestoreDefault, rowKey, keepLastItem, valueList, deleteDisable, operationButtons]);
682
880
  /**
683
881
  *@desc 渲染内容
684
882
  * */
@@ -692,6 +890,8 @@ const DynamicMultiBox = props => {
692
890
  var _a;
693
891
  const id = item[rowKey];
694
892
  const rowError = (_a = errors === null || errors === void 0 ? void 0 : errors.filter(item => item[rowKey] === id)) === null || _a === void 0 ? void 0 : _a[0];
893
+ // 计算每一行的操作列类名（考虑按钮禁用情况）
894
+ const operatorColumnClass = getOperatorColumnClass(showDeleteIcon, isAllHideDelBol, rowIndex, item);
695
895
  return jsxs("div", Object.assign({
696
896
  className: 'content-row-form'
697
897
  }, {
@@ -703,31 +903,16 @@ const DynamicMultiBox = props => {
703
903
  onFormItemChange: (name, id, value) => onFormItemChange(name, id, value, rowIndex),
704
904
  icon: icon,
705
905
  config: config
706
- }), jsxs("div", Object.assign({
707
- className: "operator-column-40 ".concat(isSort && showDeleteIcon && !isAllHideDelBol ? 'operator-column-80' : '')
906
+ }), jsx("div", Object.assign({
907
+ className: operatorColumnClass
708
908
  }, {
709
- children: [jsx("div", Object.assign({
710
- className: "operator-column-icon delete-icon ".concat(!showDeleteIcon || deleteDisable.includes(id) ? 'hidden-icon' : ''),
711
- onClick: () => onDeleteEvent(rowIndex)
712
- }, {
713
- children: deleteRender ? deleteRender(rowIndex, item, valueList) : jsx(Delete, {})
714
- })), isSort && jsx("div", Object.assign({
715
- className: !showDeleteIcon || deleteDisable.includes(id) ? 'hidden-icon' : 'center-line'
716
- }, {
717
- children: jsx("div", {
718
- className: 'line'
719
- })
720
- })), isSort && jsx("div", Object.assign({
721
- className: "sort-handler operator-column-icon ".concat(!showDeleteIcon ? 'hidden-icon' : '')
722
- }, {
723
- children: jsx(Drag, {})
724
- }))]
909
+ children: renderRowOperations(rowIndex, item, showDeleteIcon)
725
910
  }))]
726
911
  }), id);
727
912
  })
728
913
  });
729
914
  }
730
- }, [valueList, isSort, isFilter, errors, fixedConfig, selectedConfig, keepLastItem, deleteRender, rowKey, deleteDisable]);
915
+ }, [valueList, isSort, isFilter, errors, fixedConfig, selectedConfig, keepLastItem, deleteRender, rowKey, deleteDisable, operationButtons]);
731
916
  /**
732
917
  * @desc 删除事件
733
918
  * */
package/DynamicMultiBox/interface.d.ts CHANGED
@@ -36,6 +36,32 @@ export type IConfig = {
36
36
  /** 其他*/
37
37
  [name: string]: any;
38
38
  } & (TextFieldProps | SelectProps | SwitchProps | InputNumberProps | InputLangProps | ComboSelectProps | DatePickerProps);
39
+ /** 操作按钮配置项 */
40
+ export interface IOperationButton {
41
+ /** 按钮标识 */
42
+ key: string;
43
+ /** 按钮图标 */
44
+ icon?: ReactNode;
45
+ /** 按钮文本 */
46
+ text?: string;
47
+ /** 是否禁用 */
48
+ disabled?: boolean | ((rowIndex: number, item: IValueList, valueList: IValueList[]) => boolean);
49
+ /** 点击事件 */
50
+ onClick: (rowIndex: number, item: IValueList, valueList: IValueList[]) => void;
51
+ /** 自定义渲染 */
52
+ render?: (rowIndex: number, item: IValueList, valueList: IValueList[]) => ReactNode;
53
+ /** 样式 */
54
+ className?: string;
55
+ /** 提示 */
56
+ tooltip?: TooltipProps;
57
+ /** 排序位置:
58
+ * 0 - 插入到删除按钮之前
59
+ * 1 - 插入到删除按钮之后，排序按钮之前（如果有排序按钮）
60
+ * 2 - 插入到排序按钮之后（如果有排序按钮），否则删除按钮之后
61
+ * 3+ - 默认放在最后
62
+ */
63
+ order?: number;
64
+ }
39
65
  /** value集合*/
40
66
  export interface IValueList {
41
67
  /** 每行value值集合， name映射configItem中的name*/
@@ -175,4 +201,8 @@ export interface IMultiValueProps {
175
201
  * 是否保持最后一条
176
202
  * */
177
203
  keepLastItem?: boolean;
204
+ /**
205
+ * 自定义操作按钮，支持每行配置多个操作按钮
206
+ */
207
+ operationButtons?: IOperationButton[];
178
208
  }
package/Form/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { DeepClone } from '@paraview/lib';
3
3
  import React__default from 'react';
4
- import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-0163a7b0.js';
4
+ import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-99984222.js';
5
5
  import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
6
6
  import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
7
7
  import '../TextField/index.js';
@@ -55,12 +55,10 @@ import 'rc-input-number';
55
55
  import '@para-ui/icons/Up';
56
56
  import '../ComboSelect/index.js';
57
57
  import '../Table/index.js';
58
- import '../_verture/typeof-adeedc13.js';
59
58
  import '@para-ui/icons/ScreenF';
60
59
  import '@para-ui/icons/UpTriangleF';
61
60
  import '@para-ui/icons/DownTriangleF';
62
61
  import '@para-ui/icons/Panel';
63
- import '../_verture/defineProperty-6f62bb2a.js';
64
62
  import '../_verture/index-0f5ee6f7.js';
65
63
  import '../_verture/sortable.esm-76fe46a4.js';
66
64
  import '../OperateBtn/index.js';
@@ -76,6 +74,8 @@ import '@para-ui/icons/DoubleRight';
76
74
  import '../ScrollBar/index.js';
77
75
  import '../_verture/index-09404080.js';
78
76
  import '../_verture/toConsumableArray-599cd94a.js';
77
+ import '../_verture/defineProperty-6f62bb2a.js';
78
+ import '../_verture/typeof-adeedc13.js';
79
79
  import '../_verture/index-8ac46bd9.js';
80
80
  import '../_verture/typeof-6ec38efd.js';
81
81
  import 'rc-tree';
package/FormItem/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import 'react/jsx-runtime';
2
2
  import 'react';
3
- export { F as default } from '../_verture/index-0163a7b0.js';
3
+ export { F as default } from '../_verture/index-99984222.js';
4
4
  import 'clsx';
5
5
  import '../Label/index.js';
6
6
  import '../_verture/constant-5317fc89.js';
@@ -55,12 +55,10 @@ import 'rc-input-number';
55
55
  import '@para-ui/icons/Up';
56
56
  import '../ComboSelect/index.js';
57
57
  import '../Table/index.js';
58
- import '../_verture/typeof-adeedc13.js';
59
58
  import '@para-ui/icons/ScreenF';
60
59
  import '@para-ui/icons/UpTriangleF';
61
60
  import '@para-ui/icons/DownTriangleF';
62
61
  import '@para-ui/icons/Panel';
63
- import '../_verture/defineProperty-6f62bb2a.js';
64
62
  import '../_verture/index-0f5ee6f7.js';
65
63
  import '../_verture/sortable.esm-76fe46a4.js';
66
64
  import '../OperateBtn/index.js';
@@ -76,6 +74,8 @@ import '@para-ui/icons/DoubleRight';
76
74
  import '../ScrollBar/index.js';
77
75
  import '../_verture/index-09404080.js';
78
76
  import '../_verture/toConsumableArray-599cd94a.js';
77
+ import '../_verture/defineProperty-6f62bb2a.js';
78
+ import '../_verture/typeof-adeedc13.js';
79
79
  import '../_verture/index-8ac46bd9.js';
80
80
  import '../_verture/typeof-6ec38efd.js';
81
81
  import 'rc-tree';
package/README.md CHANGED
@@ -1,4 +1,12 @@
1
- ## 🎉 para-ui/core@4.0.62 发布
1
+ ## 🎉 para-ui/core@4.0.64 发布
2
+
3
+ 🔧【Bugfix】
4
+ - 【上传-Upload】修复上传时可以操作删除操作
5
+
6
+ ## 🎉 para-ui/core@4.0.63 发布
7
+
8
+ 🎁【Feature】
9
+ - 【动态多值框-DynamicMultiBox】新增自定义操作按钮支持
2
10
 
3
11
  🎁【Feature】
4
12
  - 【国际化输入框-InputLang】增加长度限制参数
package/Stepper/index.js CHANGED
@@ -25,7 +25,7 @@ import '@paraview/lib';
25
25
  import '../_verture/useResizeObserver-edda059a.js';
26
26
 
27
27
  //默认图标
28
- const Icons = {
28
+ var Icons = {
29
29
  1: jsx(One, {
30
30
  size: "medium"
31
31
  }),
package/Switch/index.js CHANGED
@@ -26,8 +26,8 @@ var zh = {
26
26
  };
27
27
 
28
28
  var localeJson = {
29
- zh,
30
- en
29
+ zh: zh,
30
+ en: en
31
31
  };
32
32
 
33
33
  var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-switch {\n position: relative;\n display: inline-block;\n width: 32px;\n height: 16px;\n vertical-align: middle;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n}\n.paraui-v4-switch .component-switch {\n border: none;\n cursor: pointer;\n}\n.paraui-v4-switch:before {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n height: 16px;\n border-radius: 8px;\n background-color: rgb(212, 218, 227);\n content: \"\";\n transition: all 0.2s;\n}\na .paraui-v4-switch:focus {\n outline: 0;\n box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:focus {\n box-shadow: none;\n}\n.paraui-v4-switch:focus:hover {\n box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:before {\n background-color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-loading *, .paraui-v4-switch.component-switch-disabled * {\n box-shadow: none;\n}\n.paraui-v4-switch-loading .component-switch-inner::before, .paraui-v4-switch.component-switch-disabled .component-switch-inner::before {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n height: 16px;\n background-color: rgba(255, 255, 255, 0.5);\n content: \"\";\n z-index: 100;\n}\n.paraui-v4-switch .component-switch-inner {\n display: block;\n margin: 0 7px 0 25px;\n font-size: 14px;\n transition: margin 0.2s;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-inner {\n margin: 0 25px 0 7px;\n}\n.paraui-v4-switch .component-switch-handle {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n transition: all 0.2s ease-in-out;\n}\n.paraui-v4-switch .component-switch-handle::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgb(255, 255, 255);\n border-radius: 9px;\n box-shadow: none;\n transition: all 0.2s ease-in-out;\n content: \"\";\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle {\n left: calc(100% - 14px);\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle::before {\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle::before {\n right: -30%;\n left: 0;\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle::before {\n right: 0;\n left: -30%;\n}\n.paraui-v4-switch .component-switch-loading-icon {\n position: relative;\n top: 1px;\n color: rgb(46, 101, 230);\n font-size: 10px;\n vertical-align: top;\n animation: switchLoadingCircle 1s infinite linear;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-loading-icon {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-small {\n min-width: 28px;\n height: 14px;\n line-height: 14px;\n}\n.paraui-v4-switch-small .component-switch-inner {\n margin: 0 5px 0 18px;\n font-size: 14px;\n}\n.paraui-v4-switch-small .component-switch-handle {\n width: 12px;\n height: 12px;\n top: 3px;\n left: 2px;\n}\n.paraui-v4-switch-small .component-switch-loading-icon {\n top: 1.5px;\n font-size: 9px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-inner {\n margin: 0 18px 0 5px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-handle {\n left: calc(100% - 12px - 2px);\n}\n@keyframes switchLoadingCircle {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.paraui-v4-switch-disabled::before {\n background-color: rgb(225, 229, 236);\n}\n.paraui-v4-switch-disabled.component-switch-checked::before {\n background-color: rgb(151, 178, 242);\n}\n\n.component-label-box {\n display: flex;\n align-items: center;\n}\n.component-label-box .sup-text {\n color: rgb(92, 101, 115);\n font-size: 14px;\n margin-left: 10px;\n line-height: 16px;\n}\n.component-label-box .sup-text > a {\n text-decoration: none;\n cursor: pointer;\n color: rgb(46, 101, 230);\n}\n.component-label-box .sup-text > a:hover {\n color: rgb(87, 131, 235);\n}\n\n.paraui-v4-switch-label {\n display: inline-flex;\n align-items: flex-end;\n}\n.paraui-v4-switch-label .component-disabled-text {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-switch-label .component-desc-text {\n margin-bottom: 0;\n margin-right: 10px;\n line-height: 16px;\n color: rgb(29, 33, 38);\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help {\n line-height: 1;\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg {\n top: 0;\n}\n.paraui-v4-switch-label .paraui-v4-label-text-container {\n display: flex;\n flex-direction: column;\n}\n\n.paraui-v4-switch-desc-end {\n flex-direction: row-reverse;\n}\n.paraui-v4-switch-desc-end .component-desc-text {\n margin-right: 0;\n}\n\n.component-switch-disabled > div:nth-child(1)::before {\n transition: all 2s ease-in-out;\n}";