@para-ui/core 3.0.28 → 3.0.30
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.
- package/AutoBox/index.js +48 -88
- package/AutoTips/index.js +25 -32
- package/Breadcrumbs/index.js +43 -63
- package/Button/SplitButton.d.ts +1 -1
- package/Button/index.d.ts +1 -1
- package/Button/index.js +88 -118
- package/ButtonGroup/index.js +27 -36
- package/Carousel/index.d.ts +2 -2
- package/Carousel/index.js +27 -28
- package/Cascader/index.js +52 -64
- package/Checkbox/index.js +23 -39
- package/CheckboxGroup/index.js +31 -48
- package/Collapse/collapsePanel.d.ts +1 -1
- package/Collapse/index.d.ts +1 -1
- package/Collapse/index.js +9 -29
- package/Collapse/util.d.ts +2 -2
- package/CollapseBox/index.js +45 -56
- package/CollapseLayout/index.js +35 -54
- package/ComboSelect/index.js +222 -349
- package/ComboSelect/interface.d.ts +3 -3
- package/Container/index.js +17 -20
- package/DatePicker/generatePicker/index.d.ts +17 -17
- package/DatePicker/index.d.ts +4 -4
- package/DatePicker/index.js +111 -167
- package/Desktop/index.js +62 -173
- package/Drawer/index.js +65 -58
- package/Drawer/interface.d.ts +7 -3
- package/Dropdown/index.d.ts +1 -1
- package/Dropdown/index.js +3 -3
- package/Empty/index.js +17 -22
- package/Form/index.d.ts +1 -1
- package/Form/index.js +38 -80
- package/FormItem/index.d.ts +1 -1
- package/FormItem/index.js +11 -11
- package/FormItem/validateFunction.d.ts +1 -1
- package/FunctionModal/index.js +11 -11
- package/GlobalContext/index.js +3 -3
- package/GlobalContext/usePopupContainer.d.ts +1 -1
- package/Help/index.js +11 -11
- package/HelperText/index.js +11 -12
- package/InputLang/index.js +47 -80
- package/InputNumber/index.js +65 -100
- package/Label/index.js +15 -16
- package/Loading/index.js +6 -7
- package/Menu/index.js +148 -328
- package/Menu/interface.d.ts +2 -2
- package/Menu/verticalMenuList.d.ts +1 -1
- package/Message/index.d.ts +1 -1
- package/Message/index.js +45 -64
- package/Modal/Confirm/index.d.ts +2 -2
- package/Modal/index.d.ts +1 -1
- package/Modal/index.js +119 -152
- package/MultiBox/index.js +44 -76
- package/Notification/index.d.ts +2 -2
- package/Notification/index.js +51 -72
- package/OperateBtn/index.js +42 -70
- package/PageHeader/index.js +120 -286
- package/PageHeader/interface.d.ts +1 -1
- package/Pagination/index.d.ts +2 -2
- package/Pagination/index.js +79 -131
- package/ParauiProvider/index.js +2 -3
- package/PasswordRules/index.js +12 -30
- package/PopConfirm/index.d.ts +1 -1
- package/PopConfirm/index.js +52 -59
- package/Popover/index.js +8 -9
- package/Progress/index.d.ts +6 -6
- package/Progress/index.js +50 -89
- package/Querying/index.js +14 -17
- package/README.md +813 -800
- package/Radio/index.js +21 -33
- package/RadioGroup/index.js +32 -47
- package/Search/index.js +44 -66
- package/Select/index.js +176 -343
- package/SelectInput/index.js +8 -9
- package/Selector/index.js +285 -681
- package/SelectorPicker/index.js +62 -97
- package/SingleBox/index.js +30 -55
- package/Slider/index.d.ts +1 -1
- package/Slider/index.js +29 -41
- package/Slider/interface.d.ts +2 -2
- package/Split/index.js +10 -23
- package/Status/index.js +8 -7
- package/Stepper/index.d.ts +1 -1
- package/Stepper/index.js +20 -25
- package/Styles/form.scss +5 -5
- package/Styles/index.scss +37 -37
- package/Styles/normalize.scss +348 -348
- package/Styles/scrollbar.scss +223 -223
- package/Styles/theme.scss +74 -74
- package/Switch/index.d.ts +2 -2
- package/Switch/index.js +19 -20
- package/Table/index.js +568 -1019
- package/Table/interface.d.ts +5 -5
- package/Tabs/index.d.ts +3 -3
- package/Tabs/index.js +47 -65
- package/Tag/TagGroup.d.ts +1 -1
- package/Tag/index.d.ts +2 -2
- package/Tag/index.js +72 -107
- package/TextEditor/index.d.ts +2 -2
- package/TextEditor/index.js +81 -105
- package/TextField/index.js +141 -220
- package/TimePicker/index.d.ts +1 -1
- package/TimePicker/index.js +12 -15
- package/Timeline/index.js +42 -52
- package/Title/index.js +10 -9
- package/ToggleButton/ToggleButtonGroup.d.ts +1 -1
- package/ToggleButton/index.js +50 -70
- package/Tooltip/index.js +64 -98
- package/Tooltip/interface.d.ts +1 -1
- package/Transfer/index.d.ts +1 -1
- package/Transfer/index.js +114 -137
- package/Transfer/useClick.d.ts +1 -1
- package/Tree/index.js +10 -10
- package/Tree/interface.d.ts +6 -6
- package/Upload/Dragger/index.d.ts +1 -1
- package/Upload/ImageUpload/index.d.ts +1 -1
- package/Upload/ImgCrop/EasyCrop.d.ts +1 -1
- package/Upload/index.d.ts +1 -1
- package/Upload/index.js +283 -475
- package/Upload/interface.d.ts +2 -2
- package/_verture/{constant-bf34e6fa.js → constant-66aa48a1.js} +0 -1
- package/_verture/defineProperty-62acccfc.js +34 -0
- package/_verture/{index-342379c6.js → index-06fea29b.js} +79 -124
- package/_verture/{index-48875ffd.js → index-131f8fe5.js} +80 -181
- package/_verture/{index-31ce5a11.js → index-92144ad3.js} +238 -445
- package/_verture/{index-bbed73a3.js → index-be4faaee.js} +19 -61
- package/_verture/{intl-336570e4.js → intl-5cbb940c.js} +4 -12
- package/_verture/{modalContext-d646d9db.js → modalContext-c749e1c6.js} +18 -43
- package/_verture/{slicedToArray-d7722f4b.js → slicedToArray-77980792.js} +23 -25
- package/_verture/{toConsumableArray-f8047a75.js → toConsumableArray-87c7d895.js} +1 -1
- package/_verture/{useFormatMessage-f4452258.js → useFormatMessage-703f8b20.js} +1 -3
- package/_verture/{useGlobalProps-af9a2af6.js → useGlobalProps-1b846a65.js} +1 -2
- package/_verture/{usePopupContainer-b8ab7cab.js → usePopupContainer-87febeb9.js} +10 -25
- package/_verture/{util-a77b261e.js → util-7e1fb1e2.js} +2 -3
- package/index.d.ts +2 -4
- package/index.js +15 -16
- package/package.json +167 -168
- package/Test/index.d.ts +0 -3
- package/Test/index.js +0 -9
- package/_verture/defineProperty-0590dc61.js +0 -16
package/Table/interface.d.ts
CHANGED
|
@@ -12,15 +12,15 @@ export interface Anyjson {
|
|
|
12
12
|
[name: string]: any;
|
|
13
13
|
}
|
|
14
14
|
/** 请求方式枚举 */
|
|
15
|
-
export
|
|
15
|
+
export type MethodType = 'Post' | 'Get';
|
|
16
16
|
/** 排序方式枚举 asc 升序 desc 降序 not 没有 */
|
|
17
|
-
export
|
|
17
|
+
export type OrderType = 'asc' | 'desc' | undefined;
|
|
18
18
|
/** 表格头部复选框选中状态 全选 / 半选 / 不选 */
|
|
19
|
-
export
|
|
19
|
+
export type SelectStatus = 'all' | 'half' | 'not';
|
|
20
20
|
/** 嵌套表格状态 */
|
|
21
|
-
export
|
|
21
|
+
export type ExpandableStatus = 'develop' | 'retract' | undefined;
|
|
22
22
|
/** 对齐方式 */
|
|
23
|
-
export
|
|
23
|
+
export type AlignType = 'left' | 'center' | 'right';
|
|
24
24
|
/** 渲染数据参数 */
|
|
25
25
|
export interface HeadDataProps {
|
|
26
26
|
/** 样式class */
|
package/Tabs/index.d.ts
CHANGED
|
@@ -8,8 +8,8 @@ import { TabPane, TabsProps as RcTabsProps, TabPaneProps } from 'rc-tabs';
|
|
|
8
8
|
import { PopConfirmProps } from '../PopConfirm';
|
|
9
9
|
import { HelpProps } from '../Help';
|
|
10
10
|
import './index.scss';
|
|
11
|
-
export
|
|
12
|
-
export
|
|
11
|
+
export type TabsType = 'line' | 'card' | 'editable-card' | 'track' | 'card-container';
|
|
12
|
+
export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
13
13
|
export type { TabPaneProps };
|
|
14
14
|
export interface TabProps {
|
|
15
15
|
/** tab text */
|
|
@@ -62,7 +62,7 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
|
|
|
62
62
|
[name: string]: any;
|
|
63
63
|
}
|
|
64
64
|
export declare const Tabs: FC<TabsProps>;
|
|
65
|
-
|
|
65
|
+
type mergedTabs = typeof Tabs & {
|
|
66
66
|
TabPane: typeof TabPane;
|
|
67
67
|
};
|
|
68
68
|
declare const _default: mergedTabs;
|
package/Tabs/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-
|
|
1
|
+
import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
|
|
2
2
|
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
|
|
3
3
|
import React__default, { createElement } from 'react';
|
|
4
4
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
@@ -9,25 +9,25 @@ import CloseIcon from '@para-ui/icons/Close';
|
|
|
9
9
|
import { PopConfirm } from '../PopConfirm/index.js';
|
|
10
10
|
import Help from '../Help/index.js';
|
|
11
11
|
import clsx from 'clsx';
|
|
12
|
-
import { u as useFormatMessage } from '../_verture/useFormatMessage-
|
|
13
|
-
import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-
|
|
12
|
+
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
|
|
13
|
+
import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
|
|
14
14
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
15
|
-
import '../_verture/
|
|
15
|
+
import '../_verture/typeof-498dd2b1.js';
|
|
16
|
+
import '../_verture/slicedToArray-77980792.js';
|
|
16
17
|
import '@para-ui/icons/CheckCircleF';
|
|
17
18
|
import '@para-ui/icons/WarningCircle';
|
|
18
19
|
import '@para-ui/icons/CloseCircleF';
|
|
19
20
|
import '@para-ui/icons/WarningCircleF';
|
|
20
21
|
import '../Button/index.js';
|
|
21
|
-
import '../_verture/typeof-498dd2b1.js';
|
|
22
22
|
import '@para-ui/icons/LoadingF';
|
|
23
23
|
import '@para-ui/icons/Forbid';
|
|
24
24
|
import '../Tooltip/index.js';
|
|
25
25
|
import 'rc-tooltip';
|
|
26
26
|
import 'rc-tooltip/lib/placements';
|
|
27
27
|
import '@para-ui/icons/Down';
|
|
28
|
-
import '../_verture/index-
|
|
28
|
+
import '../_verture/index-be4faaee.js';
|
|
29
29
|
import 'rc-dropdown';
|
|
30
|
-
import '../_verture/usePopupContainer-
|
|
30
|
+
import '../_verture/usePopupContainer-87febeb9.js';
|
|
31
31
|
import 'dayjs';
|
|
32
32
|
import '@paraview/lib';
|
|
33
33
|
import '@para-ui/core/GlobalContext';
|
|
@@ -49,55 +49,51 @@ var localeJson = {
|
|
|
49
49
|
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:29\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:39\n* @description\n*/\n.paraui-v3-tabs-small > .component-tabs-nav .component-tabs-tab {\n padding: 8px 0;\n font-size: 14px;\n}\n\n.paraui-v3-tabs-large > .component-tabs-nav .component-tabs-tab {\n padding: 16px 0;\n font-size: 16px;\n}\n\n.paraui-v3-tabs-card.paraui-v3-tabs-small > .component-tabs-nav .component-tabs-tab {\n padding: 6px 16px;\n}\n\n.paraui-v3-tabs-card.paraui-v3-tabs-large > .component-tabs-nav .component-tabs-tab {\n padding: 7px 16px 6px;\n}\n\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:44\n* @description\n*/\n.paraui-v3-tabs.component-tabs-top, .paraui-v3-tabs.component-tabs-bottom {\n flex-direction: column;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav {\n margin: 0 0 16px 0;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n position: absolute;\n right: 0;\n left: 0;\n border-bottom: 1px solid rgba(171, 176, 185, 0.2);\n content: \"\";\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n height: 1px;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n transition: width 0.3s, left 0.3s, right 0.3s;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n top: 0;\n bottom: 0;\n width: 30px;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n left: 0;\n box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n right: 0;\n box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before {\n opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after {\n opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav::before {\n bottom: 0;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar {\n bottom: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav {\n order: 1;\n margin-top: 16px;\n margin-bottom: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n top: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n top: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-content-holder, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-content-holder {\n order: 0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav {\n flex-direction: column;\n min-width: 50px;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab {\n padding: 0 12px;\n text-align: center;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n margin: 8px 0 0 0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap {\n flex-direction: column;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n right: 0;\n left: 0;\n height: 30px;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n top: 0;\n box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n bottom: 0;\n box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before {\n opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after {\n opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n width: 1px;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n transition: height 0.3s, top 0.3s;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-operations {\n flex: 1 0 auto;\n flex-direction: column;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar {\n right: 0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-content-holder, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-content-holder {\n margin-left: -1px;\n border-left: 1px solid #f0f0f0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n padding-left: 24px;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-nav, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav {\n order: 1;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n left: 0;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-content-holder, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-content-holder {\n order: 0;\n margin-right: -1px;\n border-right: 1px solid #f0f0f0;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n padding-right: 24px;\n}\n\n.component-tabs-dropdown {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n color: rgba(0, 0, 0, 0.85);\n font-size: 14px;\n font-variant: tabular-nums;\n line-height: 1.5715;\n list-style: none;\n font-feature-settings: \"tnum\";\n position: absolute;\n top: -9999px;\n left: -9999px;\n z-index: 1050;\n display: block;\n}\n.component-tabs-dropdown.component-tabs-dropdown-hidden {\n display: none;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu {\n max-height: 200px;\n margin: 0;\n padding: 4px 0;\n overflow-x: hidden;\n overflow-y: auto;\n text-align: left;\n list-style-type: none;\n background-color: rgb(255, 255, 255);\n background-clip: padding-box;\n border-radius: 4px;\n outline: none;\n box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item {\n display: flex;\n align-items: center;\n min-width: 140px;\n margin: 0;\n padding: 7px 12px;\n overflow: hidden;\n color: rgb(46, 55, 67);\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: pointer;\n transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help {\n display: inline-flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v3-help {\n display: inline-flex;\n margin-left: 4px;\n font-size: 14px;\n color: rgba(46, 55, 67, 0.7);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v3-help svg {\n color: inherit;\n font-size: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v3-help:hover {\n color: rgb(54, 102, 214);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item > span {\n flex: 1;\n white-space: nowrap;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove {\n flex: none;\n margin-left: 12px;\n margin-top: 2px;\n color: rgb(46, 55, 67);\n background: transparent;\n border: 0;\n cursor: pointer;\n transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove svg {\n color: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove:hover {\n color: rgba(54, 102, 214, 0.8);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item:hover {\n background: #f5f5f5;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled,\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled:hover {\n color: rgba(46, 55, 67, 0.4);\n background: transparent;\n cursor: not-allowed;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n animation-duration: 0.2s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.component-tabs-slide-up-leave {\n animation-duration: 0.2s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.component-tabs-slide-up-enter.component-tabs-slide-up-enter-active,\n.component-tabs-slide-up-appear.component-tabs-slide-up-appear-active {\n animation-name: componentTabsSlideUpIn;\n animation-play-state: running;\n}\n\n.component-tabs-slide-up-leave.component-tabs-slide-up-leave-active {\n animation-name: componentTabsSlideUpOut;\n animation-play-state: running;\n pointer-events: none;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n opacity: 0;\n animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.component-tabs-slide-up-leave {\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n\n@keyframes componentTabsSlideUpIn {\n 0% {\n transform: scaleY(0.8);\n transform-origin: 0% 0%;\n opacity: 0;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n}\n@keyframes componentTabsSlideUpOut {\n 0% {\n transform: scaleY(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(0.8);\n transform-origin: 0% 0%;\n opacity: 0;\n }\n}\n.paraui-v3-tabs {\n color: rgb(46, 55, 67);\n font-size: 14px;\n line-height: 1.5715;\n display: flex;\n background-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav {\n position: relative;\n display: flex;\n flex: none;\n align-items: center;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap {\n position: relative;\n display: flex;\n flex: auto;\n align-self: stretch;\n overflow: hidden;\n white-space: nowrap;\n transform: translate(0);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n position: absolute;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n content: \"\";\n pointer-events: none;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-list {\n position: relative;\n display: flex;\n transition: transform 0.3s;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations {\n display: flex;\n align-self: stretch;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations-hidden, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations-hidden {\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more {\n position: relative;\n padding: 8px 12px;\n background: transparent;\n border: 0;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more svg, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more svg {\n color: inherit;\n font-size: 16px;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more::after, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more::after {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 5px;\n transform: translateY(100%);\n content: \"\";\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add {\n min-width: 40px;\n margin-left: 2px;\n padding: 0 8px;\n background-color: rgb(255, 255, 255);\n border: 1px solid rgba(171, 176, 185, 0.4);\n color: rgba(46, 55, 67, 0.7);\n outline: none;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add svg, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add svg {\n color: inherit;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:hover, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:hover {\n color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:active, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:active, .paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:focus, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:focus {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-extra-content {\n flex: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-centered > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.paraui-v3-tabs-centered > div > .component-tabs-nav .component-tabs-nav-wrap {\n justify-content: center;\n}\n.paraui-v3-tabs .component-tabs-ink-bar {\n position: absolute;\n background: rgb(54, 102, 214);\n pointer-events: none;\n}\n.paraui-v3-tabs .component-tabs-tab {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 40px;\n padding: 0 12px;\n font-size: 14px;\n background: transparent;\n border: 0;\n outline: none;\n cursor: pointer;\n}\n.paraui-v3-tabs .component-tabs-tab-btn:focus,\n.paraui-v3-tabs .component-tabs-tab-remove:focus,\n.paraui-v3-tabs .component-tabs-tab-btn:active,\n.paraui-v3-tabs .component-tabs-tab-remove:active {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-tab-btn {\n outline: none;\n transition: all 0.3s;\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v3-help {\n display: inline-flex;\n margin-left: 4px;\n font-size: 14px;\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v3-help svg {\n margin-right: 0;\n color: inherit;\n font-size: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v3-help:hover {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-tab-remove {\n display: inline-flex;\n flex: none;\n margin-right: -4px;\n margin-left: 4px;\n color: rgb(46, 55, 67);\n font-size: 14px;\n background: transparent;\n border: none;\n outline: none;\n cursor: pointer;\n transition: all 0.3s;\n}\n.paraui-v3-tabs .component-tabs-tab-remove svg {\n color: inherit;\n font-size: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab-remove span {\n display: inline-flex;\n}\n.paraui-v3-tabs .component-tabs-tab-remove:hover {\n color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-tabs .component-tabs-tab:hover {\n color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-tabs .component-tabs-tab:hover .paraui-v3-help {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-tab:hover .component-tabs-tab-remove {\n color: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-active {\n color: rgb(54, 102, 214);\n font-weight: 400;\n text-shadow: 0 0 0.25px currentcolor;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-active .component-tabs-tab-btn {\n color: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled {\n color: rgba(46, 55, 67, 0.4);\n cursor: not-allowed;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-btn:focus,\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-remove:focus,\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-btn:active,\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-remove:active {\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-tabs .component-tabs-tab .component-tabs-tab-remove svg {\n margin: 0;\n}\n.paraui-v3-tabs .component-tabs-tab svg {\n margin-right: 12px;\n}\n.paraui-v3-tabs .component-tabs-tab + .component-tabs-tab {\n margin: 0;\n}\n.paraui-v3-tabs .component-tabs-content {\n display: flex;\n width: 100%;\n}\n.paraui-v3-tabs .component-tabs-content-holder {\n flex: auto;\n min-width: 0;\n min-height: 0;\n}\n.paraui-v3-tabs .component-tabs-content-animated {\n transition: margin 0.3s;\n}\n.paraui-v3-tabs .component-tabs-tabpane {\n flex: none;\n width: 100%;\n outline: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-editable-line .component-tabs-nav .component-tabs-nav-add, .paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-nav-add {\n min-width: initial;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n align-self: center;\n margin-left: 12px;\n padding: 0;\n background-color: rgba(248, 249, 251, 0.8);\n border-color: rgba(171, 176, 185, 0.2);\n border-radius: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track {\n display: inline-flex;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav {\n height: 40px;\n background-color: rgba(171, 176, 185, 0.12);\n border-radius: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-nav-add {\n margin-right: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav:before {\n display: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-ink-bar {\n visibility: hidden;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-tab {\n height: 28px;\n margin: 6px 4px;\n padding: 0 8px;\n border-radius: 4px;\n transition: 0.3s;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n color: rgb(54, 102, 214);\n text-shadow: none;\n background-color: rgb(255, 255, 255);\n font-weight: 400;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n margin: 6px 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-left .component-tabs-nav, .paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-right .component-tabs-nav {\n height: auto;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-left .component-tabs-content-holder, .paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-right .component-tabs-content-holder {\n border-left: 0;\n border-right: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n padding: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab {\n margin: 0;\n padding: 0 12px;\n background: rgb(255, 255, 255);\n border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab:hover .component-tabs-tab-remove, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab:hover .component-tabs-tab-remove {\n color: inherit;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove {\n margin-left: 8px;\n font-size: 14px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab-active {\n color: rgb(54, 102, 214);\n background: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-ink-bar {\n visibility: hidden;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n margin-left: 0;\n border-left: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:first-child {\n border-top-left-radius: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:nth-last-child(2) {\n border-top-right-radius: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab-active {\n border-bottom-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab-active {\n border-top-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n margin-top: 0;\n border-top: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab {\n margin-left: 0;\n margin-top: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab-active {\n border-right-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab-active {\n border-left-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right .component-tabs-nav .component-tabs-nav-add {\n margin-left: 0;\n margin-top: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left .component-tabs-nav .component-tabs-nav-add {\n margin-left: 0;\n margin-top: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container > .component-tabs-nav:before {\n display: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container > .component-tabs-nav .component-tabs-tab {\n border: 0;\n transition: 0.3s;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container > .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n border-radius: 4px 4px 0 0;\n background-color: rgb(248, 249, 251);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container .component-tabs-content {\n margin-top: -16px;\n padding: 16px;\n background-color: rgb(248, 249, 251);\n border-radius: 0 0 4px 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-no-child:not(.paraui-v3-tabs-card-container) .component-tabs-nav {\n margin: 0;\n}";
|
|
50
50
|
styleInject(css_248z);
|
|
51
51
|
|
|
52
|
+
//tabs
|
|
52
53
|
var Tabs = function Tabs(props) {
|
|
53
54
|
var _clsx;
|
|
54
|
-
|
|
55
55
|
var type = props.type,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
56
|
+
className = props.className,
|
|
57
|
+
size = props.size,
|
|
58
|
+
_onEdit = props.onEdit,
|
|
59
|
+
hideAdd = props.hideAdd,
|
|
60
|
+
centered = props.centered,
|
|
61
|
+
addIcon = props.addIcon,
|
|
62
|
+
_props$moreIcon = props.moreIcon,
|
|
63
|
+
moreIcon = _props$moreIcon === void 0 ? jsx(More, {}) : _props$moreIcon,
|
|
64
|
+
editable = props.editable,
|
|
65
|
+
mode = props.mode,
|
|
66
|
+
showAdd = props.showAdd,
|
|
67
|
+
showPopConfirm = props.showPopConfirm,
|
|
68
|
+
popConfirmProps = props.popConfirmProps,
|
|
69
|
+
data = props.data,
|
|
70
|
+
onChange = props.onChange,
|
|
71
|
+
onAdd = props.onAdd,
|
|
72
|
+
children = props.children,
|
|
73
|
+
value = props.value,
|
|
74
|
+
activeKey = props.activeKey,
|
|
75
|
+
restProps = __rest(props, ["type", "className", "size", "onEdit", "hideAdd", "centered", "addIcon", "moreIcon", "editable", "mode", "showAdd", "showPopConfirm", "popConfirmProps", "data", "onChange", "onAdd", "children", "value", "activeKey"]);
|
|
77
76
|
var intl = useFormatMessage('Tabs', localeJson);
|
|
78
77
|
var prefixCls = "".concat($prefixCls, "-tabs");
|
|
79
78
|
var inType = type !== null && type !== void 0 ? type : mode;
|
|
80
|
-
var inEditable;
|
|
81
|
-
|
|
79
|
+
var inEditable;
|
|
80
|
+
//可编辑标签
|
|
82
81
|
if (inType === 'editable-card' || editable) {
|
|
83
82
|
inEditable = {
|
|
84
83
|
onEdit: function onEdit(editType, _ref) {
|
|
85
84
|
var key = _ref.key,
|
|
86
|
-
|
|
85
|
+
event = _ref.event;
|
|
87
86
|
var currItem = {};
|
|
88
|
-
|
|
89
87
|
if (editType === 'add') {
|
|
90
88
|
if (onAdd) onAdd(event);else _onEdit === null || _onEdit === void 0 ? void 0 : _onEdit(currItem, event, editType);
|
|
91
89
|
} else {
|
|
92
90
|
var tKey = key;
|
|
93
|
-
|
|
94
91
|
if (data) {
|
|
95
92
|
currItem = data.find(function (_) {
|
|
96
93
|
return String(_.value) === key;
|
|
97
94
|
}) || {};
|
|
98
95
|
if ((currItem === null || currItem === void 0 ? void 0 : currItem.value) !== undefined) tKey = currItem.value;
|
|
99
96
|
}
|
|
100
|
-
|
|
101
97
|
_onEdit === null || _onEdit === void 0 ? void 0 : _onEdit(currItem, tKey, editType);
|
|
102
98
|
}
|
|
103
99
|
},
|
|
@@ -105,33 +101,27 @@ var Tabs = function Tabs(props) {
|
|
|
105
101
|
addIcon: addIcon || jsx(Plus, {}),
|
|
106
102
|
showAdd: hideAdd !== true && showAdd !== false
|
|
107
103
|
};
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
104
|
+
}
|
|
105
|
+
//onchange
|
|
111
106
|
var handleChange = function handleChange(newActiveKey) {
|
|
112
107
|
var tKey = newActiveKey;
|
|
113
108
|
var currItem = {};
|
|
114
|
-
|
|
115
109
|
if (data) {
|
|
116
110
|
currItem = data.find(function (_) {
|
|
117
111
|
return String(_.value) === newActiveKey;
|
|
118
112
|
}) || {};
|
|
119
113
|
if ((currItem === null || currItem === void 0 ? void 0 : currItem.value) !== undefined) tKey = currItem.value;
|
|
120
114
|
}
|
|
121
|
-
|
|
122
115
|
onChange === null || onChange === void 0 ? void 0 : onChange(tKey, currItem);
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
|
|
116
|
+
};
|
|
117
|
+
//渲染closeIcon
|
|
126
118
|
var renderCloseIcon = function renderCloseIcon(item) {
|
|
127
119
|
var closable = item.closable,
|
|
128
|
-
|
|
120
|
+
closeIcon = item.closeIcon;
|
|
129
121
|
if (closable === false) return null;
|
|
130
|
-
|
|
131
122
|
if (!showPopConfirm) {
|
|
132
123
|
return closeIcon || jsx(CloseIcon, {});
|
|
133
124
|
}
|
|
134
|
-
|
|
135
125
|
return jsx("span", Object.assign({
|
|
136
126
|
onClick: function onClick(ev) {
|
|
137
127
|
return ev.stopPropagation();
|
|
@@ -150,21 +140,18 @@ var Tabs = function Tabs(props) {
|
|
|
150
140
|
children: closeIcon || jsx(CloseIcon, {})
|
|
151
141
|
}))
|
|
152
142
|
}));
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
|
|
143
|
+
};
|
|
144
|
+
//渲染tab
|
|
156
145
|
var renderTab = function renderTab() {
|
|
157
146
|
if (!(data === null || data === void 0 ? void 0 : data.length)) return children;
|
|
158
147
|
return data.map(function (item) {
|
|
159
148
|
var _a;
|
|
160
|
-
|
|
161
149
|
var label = item.label,
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
150
|
+
content = item.content,
|
|
151
|
+
value = item.value,
|
|
152
|
+
showHelp = item.showHelp,
|
|
153
|
+
helpProps = item.helpProps,
|
|
154
|
+
restTabProps = __rest(item, ["label", "content", "value", "showHelp", "helpProps"]);
|
|
168
155
|
var labelNode = showHelp ? jsxs("span", Object.assign({
|
|
169
156
|
className: "".concat($rcPrefixCls, "-tabs-tab-help")
|
|
170
157
|
}, {
|
|
@@ -178,19 +165,16 @@ var Tabs = function Tabs(props) {
|
|
|
178
165
|
closeIcon: renderCloseIcon(item)
|
|
179
166
|
}), content);
|
|
180
167
|
});
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
|
|
168
|
+
};
|
|
169
|
+
//active key
|
|
184
170
|
var getActiveKey = function getActiveKey() {
|
|
185
171
|
var inActiveKey = activeKey !== null && activeKey !== void 0 ? activeKey : value;
|
|
186
172
|
if (inActiveKey !== undefined) return String(inActiveKey);
|
|
187
173
|
return undefined;
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
|
|
174
|
+
};
|
|
175
|
+
//是否有子节点
|
|
191
176
|
var hasChildNode = function hasChildNode() {
|
|
192
177
|
var hasChild;
|
|
193
|
-
|
|
194
178
|
if (data === null || data === void 0 ? void 0 : data.length) {
|
|
195
179
|
hasChild = data.some(function (_) {
|
|
196
180
|
return _.content;
|
|
@@ -200,10 +184,8 @@ var Tabs = function Tabs(props) {
|
|
|
200
184
|
return _.props.children;
|
|
201
185
|
});
|
|
202
186
|
}
|
|
203
|
-
|
|
204
187
|
return !hasChild;
|
|
205
188
|
};
|
|
206
|
-
|
|
207
189
|
return jsx(RcTabs, Object.assign({
|
|
208
190
|
activeKey: getActiveKey(),
|
|
209
191
|
moreTransitionName: "".concat($rcPrefixCls, "-tabs-slide-up")
|
package/Tag/TagGroup.d.ts
CHANGED
package/Tag/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import React, { PropsWithChildren } from 'react';
|
|
7
7
|
import TagGroup, { TagGroupProps } from './TagGroup';
|
|
8
8
|
import './index.scss';
|
|
9
|
-
|
|
9
|
+
type PresetColorTypes = 'blue' | 'green' | 'yellow' | 'red';
|
|
10
10
|
export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
11
11
|
/** 颜色 */
|
|
12
12
|
color?: string | PresetColorTypes;
|
|
@@ -27,7 +27,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
27
27
|
/** 大小 */
|
|
28
28
|
size?: 'small' | 'large';
|
|
29
29
|
}
|
|
30
|
-
export
|
|
30
|
+
export type TagPropsWithChild = PropsWithChildren<TagProps>;
|
|
31
31
|
export type { TagGroupProps };
|
|
32
32
|
export { TagGroup };
|
|
33
33
|
export declare const Tag: React.FC<TagPropsWithChild>;
|