@para-ui/core 3.0.20 → 3.0.22
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/Button/index.js +1 -1
- package/CheckboxGroup/index.d.ts +2 -0
- package/CheckboxGroup/index.js +17 -0
- package/DatePicker/index.js +1 -1
- package/Form/index.js +1 -1
- package/FormItem/index.js +1 -1
- package/FunctionModal/index.js +2 -2
- package/HelperText/index.d.ts +6 -2
- package/HelperText/index.js +2 -1
- package/InputLang/index.js +2 -1
- package/Menu/index.js +1 -1
- package/Message/index.js +1 -1
- package/MultiBox/index.d.ts +7 -0
- package/MultiBox/index.js +111 -48
- package/MultiBox/lang/en_US.d.ts +4 -0
- package/MultiBox/lang/index.d.ts +9 -0
- package/MultiBox/lang/zh_CN.d.ts +4 -0
- package/PageHeader/index.js +1 -1
- package/README.md +22 -0
- package/RadioGroup/index.d.ts +2 -0
- package/RadioGroup/index.js +17 -0
- package/Search/index.js +1 -1
- package/Select/index.js +2 -1
- package/SelectInput/index.d.ts +2 -1
- package/SelectInput/index.js +1 -0
- package/Selector/index.js +58 -18
- package/Selector/interface.d.ts +10 -0
- package/SingleBox/index.d.ts +5 -0
- package/SingleBox/index.js +70 -23
- package/SingleBox/lang/en_US.d.ts +4 -0
- package/SingleBox/lang/index.d.ts +9 -0
- package/SingleBox/lang/zh_CN.d.ts +4 -0
- package/Slider/index.js +1 -1
- package/Status/index.d.ts +21 -0
- package/Status/index.js +36 -0
- package/Tabs/index.js +1 -1
- package/Timeline/index.js +1 -1
- package/Title/index.d.ts +1 -1
- package/Transfer/box.d.ts +4 -2
- package/Transfer/index.d.ts +9 -5
- package/Transfer/index.js +89 -71
- package/_verture/{index-35fb8f69.js → index-6fd242a8.js} +7 -7
- package/_verture/{modalContext-8522aa7e.js → modalContext-fcdc497b.js} +0 -0
- package/index.d.ts +2 -0
- package/index.js +5 -3
- package/package.json +1 -1
package/Tabs/index.js
CHANGED
|
@@ -44,7 +44,7 @@ var localeJson = {
|
|
|
44
44
|
en: en
|
|
45
45
|
};
|
|
46
46
|
|
|
47
|
-
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 linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\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: 2px;\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.4);\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-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}";
|
|
47
|
+
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 linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\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}";
|
|
48
48
|
styleInject(css_248z);
|
|
49
49
|
|
|
50
50
|
var Tabs = function Tabs(props) {
|
package/Timeline/index.js
CHANGED
|
@@ -49,7 +49,7 @@ var TimelineItem = function TimelineItem(props) {
|
|
|
49
49
|
}));
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/6/9 下午8:00\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-timeline {\n color: rgb(46, 55, 67);\n font-size: 14px;\n line-height: 1.5715;\n list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item {\n position: relative;\n margin: 0;\n min-height: 70px;\n padding-bottom: 20px;\n font-size: 14px;\n list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head:not(.component-timeline-item-head-custom) {\n background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head svg {\n color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-content {\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-tail {\n position: absolute;\n top: 16px;\n bottom: 8px;\n left: 3.5px;\n border-left: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-head {\n font-size: 12px;\n background-color: transparent;\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-tail {\n display: none;\n}\n.paraui-v3-timeline .component-timeline-item-head {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: rgb(54, 102, 214);\n border-radius: 100px;\n}\n.paraui-v3-timeline .component-timeline-item-head-custom {\n position: absolute;\n top: 5.5px;\n left: 5px;\n width: auto;\n height: auto;\n margin-top: 0;\n padding: 3px 1px;\n line-height: 1;\n text-align: center;\n border: 0;\n border-radius: 0;\n background-color: transparent;\n transform: translate(-50%, -50%);\n}\n.paraui-v3-timeline .component-timeline-item-content {\n position: relative;\n top: -7px;\n margin: 0 0 0
|
|
52
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/6/9 下午8:00\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-timeline {\n color: rgb(46, 55, 67);\n font-size: 14px;\n line-height: 1.5715;\n list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item {\n position: relative;\n margin: 0;\n min-height: 70px;\n padding-bottom: 20px;\n font-size: 14px;\n list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head:not(.component-timeline-item-head-custom) {\n background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head svg {\n color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-content {\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-tail {\n position: absolute;\n top: 16px;\n bottom: 8px;\n left: 3.5px;\n border-left: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-head {\n font-size: 12px;\n background-color: transparent;\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-tail {\n display: none;\n}\n.paraui-v3-timeline .component-timeline-item-head {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: rgb(54, 102, 214);\n border-radius: 100px;\n}\n.paraui-v3-timeline .component-timeline-item-head-custom {\n position: absolute;\n top: 5.5px;\n left: 5px;\n width: auto;\n height: auto;\n margin-top: 0;\n padding: 3px 1px;\n line-height: 1;\n text-align: center;\n border: 0;\n border-radius: 0;\n background-color: transparent;\n transform: translate(-50%, -50%);\n}\n.paraui-v3-timeline .component-timeline-item-content {\n position: relative;\n top: -7px;\n margin: 0 0 0 20px;\n word-break: break-word;\n}\n.paraui-v3-timeline .component-timeline-item-last > .component-timeline-item-tail {\n display: none;\n}\n.paraui-v3-timeline .component-timeline-item-last > .component-timeline-item-content {\n min-height: 48px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head-custom {\n left: 50%;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head {\n margin-left: -4px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head-custom {\n margin-left: 1px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-left .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-left .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-left .component-timeline-item-content {\n left: calc(50% - 4px);\n width: calc(50% - 14px);\n text-align: left;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-right .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-right .component-timeline-item-content {\n width: calc(50% - 12px);\n margin: 0;\n text-align: right;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-head-custom {\n left: calc(100% - 4px - 2px);\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-content {\n width: calc(100% - 18px);\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-pending .component-timeline-item-last .component-timeline-item-tail {\n display: block;\n height: calc(100% - 14px);\n border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-last .component-timeline-item-tail {\n display: none;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-pending .component-timeline-item-tail {\n top: 15px;\n display: block;\n height: calc(100% - 15px);\n border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-pending .component-timeline-item-content {\n min-height: 48px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-label {\n position: absolute;\n top: -7.001px;\n width: calc(50% - 12px);\n text-align: right;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-right .component-timeline-item-label {\n left: calc(50% + 14px);\n width: calc(50% - 14px);\n text-align: left;\n}";
|
|
53
53
|
styleInject(css_248z);
|
|
54
54
|
|
|
55
55
|
var Timeline = function Timeline(props) {
|
package/Title/index.d.ts
CHANGED
package/Transfer/box.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactNode, CSSProperties } from 'react';
|
|
2
|
+
import Sortable from 'sortablejs';
|
|
2
3
|
interface IBox {
|
|
3
4
|
title: string;
|
|
4
5
|
data: ItemDataProps[];
|
|
@@ -12,9 +13,9 @@ interface IBox {
|
|
|
12
13
|
fluctuationPosition?: number;
|
|
13
14
|
fluctuationOrther?: number;
|
|
14
15
|
onEndSort?: (oldIndex: any, newIndex: any) => void;
|
|
15
|
-
rightIcon: ReactNode;
|
|
16
|
-
onRightClick: (event: any) => void;
|
|
16
|
+
rightIcon?: (item: ItemDataProps) => ReactNode;
|
|
17
17
|
style: CSSProperties | undefined;
|
|
18
|
+
customKey: string;
|
|
18
19
|
}
|
|
19
20
|
export interface ItemDataProps {
|
|
20
21
|
/** 唯一值,用来过滤 */
|
|
@@ -34,3 +35,4 @@ export interface ItemDataProps {
|
|
|
34
35
|
}
|
|
35
36
|
export declare const Box: (props: IBox) => JSX.Element;
|
|
36
37
|
export default Box;
|
|
38
|
+
export declare const Sortablejs: typeof Sortable;
|
package/Transfer/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="sortablejs" />
|
|
1
2
|
import { CSSProperties, ReactNode } from 'react';
|
|
2
3
|
import { ItemDataProps } from './box';
|
|
3
4
|
import './style/index.scss';
|
|
@@ -15,14 +16,17 @@ interface TransferProps {
|
|
|
15
16
|
className?: string;
|
|
16
17
|
style?: CSSProperties;
|
|
17
18
|
data?: Array<ItemDataProps>;
|
|
18
|
-
value?: Array<
|
|
19
|
-
onChange?: (data: Array<
|
|
20
|
-
onSort?: (data: Array<
|
|
19
|
+
value?: Array<string>;
|
|
20
|
+
onChange?: (data: Array<string>) => void;
|
|
21
|
+
onSort?: (data: Array<string>) => void;
|
|
21
22
|
titles?: Array<string>;
|
|
22
23
|
trim?: boolean;
|
|
23
24
|
multiple?: boolean;
|
|
24
|
-
rightIcon?: ReactNode;
|
|
25
|
-
|
|
25
|
+
rightIcon?: (item: ItemDataProps) => ReactNode;
|
|
26
|
+
render?: (data: ItemDataProps) => void;
|
|
27
|
+
customKey?: string;
|
|
26
28
|
}
|
|
27
29
|
export declare const Transfer: (props: TransferProps) => JSX.Element;
|
|
28
30
|
export default Transfer;
|
|
31
|
+
export declare type IItemDataProps = ItemDataProps;
|
|
32
|
+
export declare const SSortablejs: typeof import("sortablejs");
|
package/Transfer/index.js
CHANGED
|
@@ -10,7 +10,6 @@ import ExpandLess from '@para-ui/icons/Up';
|
|
|
10
10
|
import Down from '@para-ui/icons/Down';
|
|
11
11
|
import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
|
|
12
12
|
import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
|
|
13
|
-
import { ArrayToObject } from '@paraview/lib';
|
|
14
13
|
import { Search } from '../Search/index.js';
|
|
15
14
|
import SearchIcon from '@para-ui/icons/Search';
|
|
16
15
|
import AutoTips from '../AutoTips/index.js';
|
|
@@ -31,6 +30,7 @@ import '../TextField/index.js';
|
|
|
31
30
|
import '../Label/index.js';
|
|
32
31
|
import '../Help/index.js';
|
|
33
32
|
import '@para-ui/icons/Help';
|
|
33
|
+
import '@paraview/lib';
|
|
34
34
|
import '@para-ui/icons/PreviewClose';
|
|
35
35
|
import '@para-ui/icons/PreviewOpen';
|
|
36
36
|
import '@para-ui/icons/CloseCircle';
|
|
@@ -3125,8 +3125,8 @@ var Box = function Box(props) {
|
|
|
3125
3125
|
onEndSort = props.onEndSort,
|
|
3126
3126
|
multiple = props.multiple,
|
|
3127
3127
|
rightIcon = props.rightIcon,
|
|
3128
|
-
|
|
3129
|
-
|
|
3128
|
+
style = props.style,
|
|
3129
|
+
customKey = props.customKey;
|
|
3130
3130
|
var intl = useFormatMessage('Transfer', localeJson);
|
|
3131
3131
|
|
|
3132
3132
|
var _useState = useState([]),
|
|
@@ -3214,21 +3214,18 @@ var Box = function Box(props) {
|
|
|
3214
3214
|
className: 'item-label'
|
|
3215
3215
|
}, {
|
|
3216
3216
|
children: jsx(AutoTips, {
|
|
3217
|
-
children: item.name || item
|
|
3217
|
+
children: item.name || item[item[customKey]]
|
|
3218
3218
|
})
|
|
3219
3219
|
})), rightIcon ? jsx("div", Object.assign({
|
|
3220
|
-
className: 'right-icon'
|
|
3221
|
-
onClick: function onClick() {
|
|
3222
|
-
!item.disabled && onRightClick(item);
|
|
3223
|
-
}
|
|
3220
|
+
className: 'right-icon'
|
|
3224
3221
|
}, {
|
|
3225
|
-
children: rightIcon
|
|
3222
|
+
children: rightIcon(item)
|
|
3226
3223
|
})) : null, direction === 'right' ? jsx("div", Object.assign({
|
|
3227
3224
|
className: 'handle'
|
|
3228
3225
|
}, {
|
|
3229
3226
|
children: jsx(Drag, {})
|
|
3230
3227
|
})) : null]
|
|
3231
|
-
}), item
|
|
3228
|
+
}), item[item[customKey]] || item.name);
|
|
3232
3229
|
})
|
|
3233
3230
|
})), jsxs("div", Object.assign({
|
|
3234
3231
|
className: 'footer'
|
|
@@ -3262,8 +3259,9 @@ var Box = function Box(props) {
|
|
|
3262
3259
|
}))]
|
|
3263
3260
|
}));
|
|
3264
3261
|
};
|
|
3262
|
+
var Sortablejs = Sortable;
|
|
3265
3263
|
|
|
3266
|
-
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-transfer {\n display: flex;\n font-size: 14px;\n user-select: none;\n}\n.paraui-v3-transfer .blue-background-class {\n background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box {\n border-radius: 4px;\n border: 1px solid rgba(171, 176, 185, 0.4);\n overflow: hidden;\n}\n.paraui-v3-transfer .box .box-header {\n background: rgba(171, 176, 185, 0.12);\n color: rgb(46, 55, 67);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-left: 10px;\n height: 36px;\n border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .count {\n margin: 0 10px 0 0;\n color: rgb(46, 55, 67);\n letter-spacing: 1px;\n margin: 0 16px 0 auto;\n}\n.paraui-v3-transfer .box .context {\n height: 400px;\n overflow: auto;\n scrollbar-base-color: red;\n}\n.paraui-v3-transfer .box .context .item-
|
|
3264
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-transfer {\n display: flex;\n font-size: 14px;\n user-select: none;\n}\n.paraui-v3-transfer .blue-background-class {\n background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box {\n border-radius: 4px;\n border: 1px solid rgba(171, 176, 185, 0.4);\n overflow: hidden;\n}\n.paraui-v3-transfer .box .box-header {\n background: rgba(171, 176, 185, 0.12);\n color: rgb(46, 55, 67);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-left: 10px;\n height: 36px;\n border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .count {\n margin: 0 10px 0 0;\n color: rgb(46, 55, 67);\n letter-spacing: 1px;\n margin: 0 16px 0 auto;\n}\n.paraui-v3-transfer .box .context {\n height: 400px;\n overflow: auto;\n scrollbar-base-color: red;\n}\n.paraui-v3-transfer .box .context .item-fluctuation {\n animation: flucturation 0.4s forwards;\n}\n.paraui-v3-transfer .box .context .item-fluctuationOrther {\n animation: flucturationOrther 0.5s forwards;\n}\n.paraui-v3-transfer .box .context .item {\n padding: 0px 8px;\n height: 36px;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.paraui-v3-transfer .box .context .item.item-checked {\n background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item.item-checked:hover {\n background-color: rgba(54, 102, 214, 0.05) !important;\n}\n.paraui-v3-transfer .box .context .item.item-checked > .item-label {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .box .context .item > .item-label {\n margin-left: 8px;\n flex: 1;\n overflow: hidden;\n color: rgb(46, 55, 67);\n}\n.paraui-v3-transfer .box .context .item:hover {\n background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-transfer .box .context .item.item-disabled:hover {\n background: inherit;\n cursor: no-drop;\n}\n.paraui-v3-transfer .box .context .item.item-disabled > .item-label {\n color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-transfer .box .context .item .handle {\n margin-left: 14px;\n display: flex;\n align-content: center;\n}\n.paraui-v3-transfer .box .context .item .handle svg {\n color: rgb(28, 41, 60);\n}\n.paraui-v3-transfer .box .context .item .handle:hover {\n background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item .handle:hover svg {\n color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-transfer .box .text-field-content {\n border: none;\n border-radius: 0;\n border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer {\n display: flex;\n align-items: center;\n border-top: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer .btn-on {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .box .footer .btn-off {\n color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer button {\n color: rgb(46, 55, 67);\n padding: 0 0 0 16px;\n}\n.paraui-v3-transfer .box .footer button:hover {\n color: #3666D6;\n}\n.paraui-v3-transfer ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .moveBtn {\n display: flex;\n height: 500px;\n flex-direction: column;\n justify-content: center;\n margin: 0 24px;\n}\n.paraui-v3-transfer .moveBtn > button:hover {\n color: white;\n background: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .moveBtn .btn-left {\n margin-top: 20px;\n}\n\n@keyframes flucturation {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(36px);\n }\n}\n@keyframes flucturationOrther {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(-36px);\n }\n}";
|
|
3267
3265
|
styleInject(css_248z);
|
|
3268
3266
|
|
|
3269
3267
|
var Transfer = function Transfer(props) {
|
|
@@ -3273,6 +3271,8 @@ var Transfer = function Transfer(props) {
|
|
|
3273
3271
|
var _props$data = props.data,
|
|
3274
3272
|
data = _props$data === void 0 ? [] : _props$data,
|
|
3275
3273
|
value = props.value,
|
|
3274
|
+
_props$customKey = props.customKey,
|
|
3275
|
+
customKey = _props$customKey === void 0 ? 'key' : _props$customKey,
|
|
3276
3276
|
onChange = props.onChange,
|
|
3277
3277
|
_props$titles = props.titles,
|
|
3278
3278
|
titles = _props$titles === void 0 ? [intl({
|
|
@@ -3290,74 +3290,49 @@ var Transfer = function Transfer(props) {
|
|
|
3290
3290
|
trim = _props$trim === void 0 ? false : _props$trim,
|
|
3291
3291
|
_props$multiple = props.multiple,
|
|
3292
3292
|
multiple = _props$multiple === void 0 ? true : _props$multiple,
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
_props$
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
} : _props$onRightClick;
|
|
3299
|
-
|
|
3300
|
-
var _useState = useState(data),
|
|
3293
|
+
rightIcon = props.rightIcon,
|
|
3294
|
+
_props$render = props.render,
|
|
3295
|
+
render = _props$render === void 0 ? function (item) {} : _props$render;
|
|
3296
|
+
|
|
3297
|
+
var _useState = useState({}),
|
|
3301
3298
|
_useState2 = _slicedToArray(_useState, 2),
|
|
3302
|
-
|
|
3303
|
-
|
|
3299
|
+
transData = _useState2[0],
|
|
3300
|
+
setTransData = _useState2[1];
|
|
3304
3301
|
|
|
3305
3302
|
var _useState3 = useState([]),
|
|
3306
3303
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
3307
|
-
|
|
3308
|
-
|
|
3304
|
+
leftData = _useState4[0],
|
|
3305
|
+
setLeftData = _useState4[1];
|
|
3309
3306
|
|
|
3310
3307
|
var _useState5 = useState([]),
|
|
3311
3308
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
3312
|
-
|
|
3313
|
-
|
|
3309
|
+
rightData = _useState6[0],
|
|
3310
|
+
setRightData = _useState6[1];
|
|
3314
3311
|
|
|
3315
3312
|
var _useState7 = useState([]),
|
|
3316
3313
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
3317
|
-
|
|
3318
|
-
|
|
3314
|
+
leftCount = _useState8[0],
|
|
3315
|
+
setLeftCount = _useState8[1];
|
|
3319
3316
|
|
|
3320
|
-
var _useState9 = useState(),
|
|
3317
|
+
var _useState9 = useState([]),
|
|
3321
3318
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
3322
|
-
|
|
3323
|
-
|
|
3319
|
+
rightCount = _useState10[0],
|
|
3320
|
+
setRightCount = _useState10[1];
|
|
3324
3321
|
|
|
3325
3322
|
var _useState11 = useState(),
|
|
3326
3323
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
3327
|
-
|
|
3328
|
-
|
|
3324
|
+
fluctuationPosition = _useState12[0],
|
|
3325
|
+
setFluctuationPosition = _useState12[1];
|
|
3329
3326
|
|
|
3330
|
-
var _useState13 = useState(
|
|
3327
|
+
var _useState13 = useState(),
|
|
3331
3328
|
_useState14 = _slicedToArray(_useState13, 2),
|
|
3332
|
-
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
useEffect(function () {
|
|
3336
|
-
if (value) {
|
|
3337
|
-
setRightData(_toConsumableArray(value));
|
|
3338
|
-
filterLeftData(_toConsumableArray(value));
|
|
3339
|
-
}
|
|
3340
|
-
}, [value]);
|
|
3341
|
-
/**
|
|
3342
|
-
* @description 过滤左边数据
|
|
3343
|
-
* @param arr {ItemDataProps} 右边数据源
|
|
3344
|
-
* */
|
|
3329
|
+
fluctuationOrther = _useState14[0],
|
|
3330
|
+
setFluctuationOrther = _useState14[1];
|
|
3345
3331
|
|
|
3346
|
-
var
|
|
3347
|
-
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
var leftArr = props.data || [];
|
|
3351
|
-
|
|
3352
|
-
for (var i = 0, l = leftArr.length; i < l; i++) {
|
|
3353
|
-
var item = leftArr[i];
|
|
3354
|
-
var key = item.key || item.name || '';
|
|
3355
|
-
if (key && (keyJson[key] || nameJson[key])) continue;
|
|
3356
|
-
handArr.push(item);
|
|
3357
|
-
}
|
|
3358
|
-
|
|
3359
|
-
setLeftData(handArr);
|
|
3360
|
-
};
|
|
3332
|
+
var _useState15 = useState(false),
|
|
3333
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
3334
|
+
animationsLock = _useState16[0],
|
|
3335
|
+
setAnimationLock = _useState16[1];
|
|
3361
3336
|
|
|
3362
3337
|
var onchange = useCallback(function (e, bol, index, direction, multiple) {
|
|
3363
3338
|
if (direction === 'left') {
|
|
@@ -3426,7 +3401,11 @@ var Transfer = function Transfer(props) {
|
|
|
3426
3401
|
|
|
3427
3402
|
setLeftData(_toConsumableArray(leftData));
|
|
3428
3403
|
setRightData(_toConsumableArray(rightData));
|
|
3429
|
-
|
|
3404
|
+
var rArr = [];
|
|
3405
|
+
rightData.forEach(function (item) {
|
|
3406
|
+
rArr.push(item[customKey]);
|
|
3407
|
+
});
|
|
3408
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(rArr);
|
|
3430
3409
|
}; // 上下移动
|
|
3431
3410
|
|
|
3432
3411
|
|
|
@@ -3442,8 +3421,12 @@ var Transfer = function Transfer(props) {
|
|
|
3442
3421
|
setFluctuationOrther(undefined);
|
|
3443
3422
|
pre.splice.apply(pre, [rightCount[0] - 1, 0].concat(_toConsumableArray(pre.splice(rightCount[0], 1))));
|
|
3444
3423
|
setAnimationLock(false);
|
|
3445
|
-
|
|
3446
|
-
|
|
3424
|
+
var rArr = [];
|
|
3425
|
+
pre.forEach(function (item) {
|
|
3426
|
+
rArr.push(item[customKey]);
|
|
3427
|
+
});
|
|
3428
|
+
onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
|
|
3429
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
|
|
3447
3430
|
return _toConsumableArray(pre);
|
|
3448
3431
|
});
|
|
3449
3432
|
}, 400);
|
|
@@ -3456,8 +3439,12 @@ var Transfer = function Transfer(props) {
|
|
|
3456
3439
|
setFluctuationOrther(undefined);
|
|
3457
3440
|
pre.splice.apply(pre, [rightCount[0] + 1, 0].concat(_toConsumableArray(pre.splice(rightCount[0], 1))));
|
|
3458
3441
|
setAnimationLock(false);
|
|
3459
|
-
|
|
3460
|
-
|
|
3442
|
+
var rArr = [];
|
|
3443
|
+
pre.forEach(function (item) {
|
|
3444
|
+
rArr.push(item[customKey]);
|
|
3445
|
+
});
|
|
3446
|
+
onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
|
|
3447
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
|
|
3461
3448
|
return _toConsumableArray(pre);
|
|
3462
3449
|
});
|
|
3463
3450
|
}, 400);
|
|
@@ -3495,11 +3482,41 @@ var Transfer = function Transfer(props) {
|
|
|
3495
3482
|
var onEndSort = useCallback(function (oldIndex, newIndex) {
|
|
3496
3483
|
setRightData(function (pre) {
|
|
3497
3484
|
pre.splice.apply(pre, [newIndex, 0].concat(_toConsumableArray(pre.splice(oldIndex, 1))));
|
|
3498
|
-
|
|
3499
|
-
|
|
3485
|
+
var rArr = [];
|
|
3486
|
+
pre.forEach(function (item) {
|
|
3487
|
+
rArr.push(item[customKey]);
|
|
3488
|
+
});
|
|
3489
|
+
onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
|
|
3490
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
|
|
3500
3491
|
return _toConsumableArray(pre);
|
|
3501
3492
|
});
|
|
3502
3493
|
}, []);
|
|
3494
|
+
useEffect(function () {
|
|
3495
|
+
if (data.length) {
|
|
3496
|
+
var _leftData = {};
|
|
3497
|
+
data.forEach(function (item) {
|
|
3498
|
+
var key = item[customKey];
|
|
3499
|
+
render(item);
|
|
3500
|
+
_leftData[key] = item;
|
|
3501
|
+
});
|
|
3502
|
+
setTransData(Object.assign({}, _leftData));
|
|
3503
|
+
}
|
|
3504
|
+
}, [data]);
|
|
3505
|
+
useEffect(function () {
|
|
3506
|
+
var rData = [];
|
|
3507
|
+
var lData = [];
|
|
3508
|
+
|
|
3509
|
+
for (var key in transData) {
|
|
3510
|
+
if (value && value.indexOf(key) >= 0) {
|
|
3511
|
+
rData.push(transData[key]);
|
|
3512
|
+
} else {
|
|
3513
|
+
lData.push(transData[key]);
|
|
3514
|
+
}
|
|
3515
|
+
}
|
|
3516
|
+
|
|
3517
|
+
setRightData([].concat(rData));
|
|
3518
|
+
setLeftData([].concat(lData));
|
|
3519
|
+
}, [value, transData]);
|
|
3503
3520
|
useEffect(function () {
|
|
3504
3521
|
var arr = [];
|
|
3505
3522
|
leftData.forEach(function (item, index) {
|
|
@@ -3525,8 +3542,8 @@ var Transfer = function Transfer(props) {
|
|
|
3525
3542
|
data: leftData,
|
|
3526
3543
|
style: style,
|
|
3527
3544
|
direction: "left",
|
|
3545
|
+
customKey: customKey,
|
|
3528
3546
|
rightIcon: rightIcon,
|
|
3529
|
-
onRightClick: onRightClick,
|
|
3530
3547
|
onchange: onchange,
|
|
3531
3548
|
multiple: multiple,
|
|
3532
3549
|
onMove: onMove,
|
|
@@ -3606,8 +3623,8 @@ var Transfer = function Transfer(props) {
|
|
|
3606
3623
|
data: rightData,
|
|
3607
3624
|
style: style,
|
|
3608
3625
|
direction: "right",
|
|
3626
|
+
customKey: customKey,
|
|
3609
3627
|
rightIcon: rightIcon,
|
|
3610
|
-
onRightClick: onRightClick,
|
|
3611
3628
|
onchange: onchange,
|
|
3612
3629
|
multiple: multiple,
|
|
3613
3630
|
onMove: onMove,
|
|
@@ -3619,5 +3636,6 @@ var Transfer = function Transfer(props) {
|
|
|
3619
3636
|
})]
|
|
3620
3637
|
}));
|
|
3621
3638
|
};
|
|
3639
|
+
var SSortablejs = Sortablejs;
|
|
3622
3640
|
|
|
3623
|
-
export { Transfer, Transfer as default };
|
|
3641
|
+
export { SSortablejs, Transfer, Transfer as default };
|
|
@@ -43,7 +43,7 @@ var FormRadioGroup = function FormRadioGroup(props) {
|
|
|
43
43
|
return jsx(RadioGroup, Object.assign({
|
|
44
44
|
value: selectValue,
|
|
45
45
|
onChange: changeValue,
|
|
46
|
-
hideErrorDom:
|
|
46
|
+
hideErrorDom: null
|
|
47
47
|
}, props));
|
|
48
48
|
};
|
|
49
49
|
|
|
@@ -76,7 +76,7 @@ var FormSelect = function FormSelect(props) {
|
|
|
76
76
|
return jsx(Select, Object.assign({
|
|
77
77
|
labelMode: "inside",
|
|
78
78
|
onChange: changeValue,
|
|
79
|
-
hideErrorDom:
|
|
79
|
+
hideErrorDom: null
|
|
80
80
|
}, props, {
|
|
81
81
|
value: selectValue
|
|
82
82
|
}));
|
|
@@ -106,7 +106,7 @@ var FormCheckboxGroup = function FormCheckboxGroup(props) {
|
|
|
106
106
|
return jsx(CheckboxGroup, Object.assign({
|
|
107
107
|
value: selectValue,
|
|
108
108
|
onChange: changeValue,
|
|
109
|
-
hideErrorDom:
|
|
109
|
+
hideErrorDom: null
|
|
110
110
|
}, props));
|
|
111
111
|
};
|
|
112
112
|
|
|
@@ -402,7 +402,7 @@ var DefaultCompoments = function DefaultCompoments(props) {
|
|
|
402
402
|
placeholder: placeholder,
|
|
403
403
|
value: dValue,
|
|
404
404
|
disabled: disabled,
|
|
405
|
-
hideErrorDom:
|
|
405
|
+
hideErrorDom: null
|
|
406
406
|
}, inputProps), {
|
|
407
407
|
onChange: function onChange(e) {
|
|
408
408
|
var _a;
|
|
@@ -566,7 +566,7 @@ var ItemType = function ItemType(props) {
|
|
|
566
566
|
multiline: true,
|
|
567
567
|
rows: 3,
|
|
568
568
|
name: name,
|
|
569
|
-
hideErrorDom:
|
|
569
|
+
hideErrorDom: null,
|
|
570
570
|
onChange: function onChange(e) {
|
|
571
571
|
validateFunction(e.target.value);
|
|
572
572
|
}
|
|
@@ -579,7 +579,7 @@ var ItemType = function ItemType(props) {
|
|
|
579
579
|
defaultValue: backData[name],
|
|
580
580
|
disabled: disabled,
|
|
581
581
|
name: name,
|
|
582
|
-
hideErrorDom:
|
|
582
|
+
hideErrorDom: null,
|
|
583
583
|
onChange: function onChange(val) {
|
|
584
584
|
validateFunction(val);
|
|
585
585
|
}
|
|
@@ -619,7 +619,7 @@ var ItemType = function ItemType(props) {
|
|
|
619
619
|
validateFunction(e.target.value);
|
|
620
620
|
},
|
|
621
621
|
name: name,
|
|
622
|
-
hideErrorDom:
|
|
622
|
+
hideErrorDom: null,
|
|
623
623
|
disabled: disabled
|
|
624
624
|
}, inputProps));
|
|
625
625
|
}
|
|
File without changes
|
package/index.d.ts
CHANGED
|
@@ -104,6 +104,8 @@ export { default as Slider } from './Slider';
|
|
|
104
104
|
export * from './Slider';
|
|
105
105
|
export { default as Split } from './Split';
|
|
106
106
|
export * from './Split';
|
|
107
|
+
export { default as Status } from './Status';
|
|
108
|
+
export * from './Status';
|
|
107
109
|
export { default as Stepper } from './Stepper';
|
|
108
110
|
export * from './Stepper';
|
|
109
111
|
export { default as Switch } from './Switch';
|