vue-devui 1.0.0-rc.9 → 1.0.0
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/README.md +163 -149
- package/alert/index.es.js +12 -7
- package/alert/index.umd.js +1 -1
- package/alert/style.css +1 -1
- package/auto-complete/index.es.js +8019 -254
- package/auto-complete/index.umd.js +29 -3
- package/auto-complete/style.css +1 -1
- package/badge/index.es.js +8 -2
- package/badge/index.umd.js +1 -1
- package/badge/style.css +1 -1
- package/button/index.es.js +104 -40
- package/button/index.umd.js +15 -15
- package/button/style.css +1 -1
- package/card/index.es.js +5 -1
- package/card/index.umd.js +1 -1
- package/card/style.css +1 -1
- package/checkbox/index.es.js +7772 -81
- package/checkbox/index.umd.js +27 -1
- package/checkbox/style.css +1 -1
- package/{date-picker → collapse}/index.d.ts +0 -0
- package/collapse/index.es.js +213 -0
- package/collapse/index.umd.js +1 -0
- package/{date-picker → collapse}/package.json +1 -1
- package/collapse/style.css +1 -0
- package/countdown/index.es.js +56 -13
- package/countdown/index.umd.js +1 -1
- package/date-picker-pro/index.d.ts +7 -0
- package/date-picker-pro/index.es.js +12020 -0
- package/date-picker-pro/index.umd.js +27 -0
- package/date-picker-pro/package.json +7 -0
- package/date-picker-pro/style.css +1 -0
- package/drawer/index.es.js +1 -1
- package/drawer/index.umd.js +1 -1
- package/drawer/style.css +1 -1
- package/dropdown/index.es.js +77 -121
- package/dropdown/index.umd.js +1 -1
- package/dropdown/style.css +1 -1
- package/editable-select/index.es.js +324 -104
- package/editable-select/index.umd.js +1 -1
- package/editable-select/style.css +1 -1
- package/form/index.es.js +91 -118
- package/form/index.umd.js +14 -14
- package/form/style.css +1 -1
- package/icon/index.es.js +106 -41
- package/icon/index.umd.js +1 -1
- package/icon/style.css +1 -1
- package/image-preview/style.css +1 -1
- package/input/index.es.js +8088 -169
- package/input/index.umd.js +27 -1
- package/input/style.css +1 -1
- package/input-number/index.es.js +8 -9
- package/input-number/index.umd.js +1 -1
- package/input-number/style.css +1 -1
- package/layout/index.es.js +1 -1
- package/layout/index.umd.js +1 -1
- package/loading/style.css +1 -1
- package/mention/index.d.ts +7 -0
- package/mention/index.es.js +8310 -0
- package/mention/index.umd.js +36 -0
- package/mention/package.json +7 -0
- package/mention/style.css +1 -0
- package/menu/index.d.ts +7 -0
- package/menu/index.es.js +934 -0
- package/menu/index.umd.js +1 -0
- package/menu/package.json +7 -0
- package/menu/style.css +1 -0
- package/message/index.d.ts +7 -0
- package/message/index.es.js +538 -0
- package/message/index.umd.js +1 -0
- package/message/package.json +7 -0
- package/message/style.css +1 -0
- package/modal/index.es.js +275 -185
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/notification/index.es.js +143 -72
- package/notification/index.umd.js +1 -1
- package/notification/style.css +1 -1
- package/nuxt/components/Collapse.js +3 -0
- package/nuxt/components/CollapseItem.js +3 -0
- package/nuxt/components/DRangeDatePickerPro.js +3 -0
- package/nuxt/components/DatePickerPro.js +3 -0
- package/nuxt/components/IconGroup.js +3 -0
- package/nuxt/components/Mention.js +3 -0
- package/nuxt/components/Menu.js +3 -0
- package/nuxt/components/MenuItem.js +3 -0
- package/nuxt/components/Message.js +3 -0
- package/nuxt/components/OptionGroup.js +3 -0
- package/nuxt/components/RadioButton.js +3 -0
- package/nuxt/components/Step.js +3 -0
- package/nuxt/components/Steps.js +3 -0
- package/nuxt/components/SubMenu.js +3 -0
- package/nuxt/components/TABLE_TOKEN.js +3 -0
- package/nuxt/components/TimePicker.js +3 -0
- package/nuxt/components/TimeSelect.js +3 -0
- package/nuxt/components/animationInjectionKey.js +3 -0
- package/nuxt/components/collapseItemProps.js +3 -0
- package/nuxt/components/collapseProps.js +3 -0
- package/nuxt/components/datePickerProCommonProps.js +3 -0
- package/nuxt/components/datePickerProPanelProps.js +3 -0
- package/nuxt/components/datePickerProProps.js +3 -0
- package/nuxt/components/mentionProps.js +3 -0
- package/nuxt/components/messageProps.js +3 -0
- package/nuxt/components/roundInjectionKey.js +3 -0
- package/nuxt/components/skeletonItemProps.js +3 -0
- package/nuxt/components/stepProps.js +3 -0
- package/nuxt/components/stepsProps.js +3 -0
- package/nuxt/components/tableProps.js +3 -0
- package/nuxt/components/timerPickerPanelProps.js +3 -0
- package/nuxt/components/treeNodeProps.js +3 -0
- package/overlay/index.es.js +76 -139
- package/overlay/index.umd.js +1 -1
- package/overlay/style.css +1 -1
- package/package.json +6 -3
- package/pagination/index.es.js +175 -7
- package/pagination/index.umd.js +1 -1
- package/pagination/style.css +1 -1
- package/panel/style.css +1 -1
- package/popover/index.es.js +101 -162
- package/popover/index.umd.js +17 -17
- package/popover/style.css +1 -1
- package/progress/style.css +1 -1
- package/radio/index.es.js +7854 -58
- package/radio/index.umd.js +27 -1
- package/radio/style.css +1 -1
- package/rate/style.css +1 -1
- package/result/index.es.js +92 -41
- package/result/index.umd.js +1 -1
- package/result/style.css +1 -1
- package/search/index.es.js +3729 -1206
- package/search/index.umd.js +18 -18
- package/search/style.css +1 -1
- package/select/index.es.js +4426 -2501
- package/select/index.umd.js +17 -17
- package/select/style.css +1 -1
- package/skeleton/index.es.js +87 -261
- package/skeleton/index.umd.js +1 -1
- package/skeleton/style.css +1 -1
- package/slider/index.es.js +116 -143
- package/slider/index.umd.js +1 -1
- package/slider/style.css +1 -1
- package/splitter/index.es.js +256 -147
- package/splitter/index.umd.js +16 -16
- package/splitter/style.css +1 -1
- package/statistic/index.es.js +34 -16
- package/statistic/index.umd.js +1 -1
- package/statistic/style.css +1 -1
- package/status/style.css +1 -1
- package/steps/index.d.ts +7 -0
- package/steps/index.es.js +386 -0
- package/steps/index.umd.js +1 -0
- package/steps/package.json +7 -0
- package/steps/style.css +1 -0
- package/style.css +1 -1
- package/switch/index.es.js +7779 -60
- package/switch/index.umd.js +27 -1
- package/switch/style.css +1 -1
- package/table/index.es.js +4092 -1464
- package/table/index.umd.js +17 -17
- package/table/style.css +1 -1
- package/tabs/index.es.js +224 -77
- package/tabs/index.umd.js +1 -1
- package/tabs/style.css +1 -1
- package/tag/index.es.js +5 -1
- package/tag/index.umd.js +1 -1
- package/tag/style.css +1 -1
- package/textarea/index.es.js +3357 -1064
- package/textarea/index.umd.js +19 -19
- package/textarea/style.css +1 -1
- package/time-picker/index.d.ts +7 -0
- package/time-picker/index.es.js +9549 -0
- package/time-picker/index.umd.js +27 -0
- package/time-picker/package.json +7 -0
- package/time-picker/style.css +1 -0
- package/time-select/index.d.ts +7 -0
- package/time-select/index.es.js +9585 -0
- package/time-select/index.umd.js +27 -0
- package/time-select/package.json +7 -0
- package/time-select/style.css +1 -0
- package/timeline/index.es.js +92 -41
- package/timeline/index.umd.js +1 -1
- package/timeline/style.css +1 -1
- package/tooltip/index.es.js +100 -163
- package/tooltip/index.umd.js +16 -16
- package/tooltip/style.css +1 -1
- package/tree/index.es.js +11036 -608
- package/tree/index.umd.js +27 -1
- package/tree/style.css +1 -1
- package/upload/index.es.js +389 -105
- package/upload/index.umd.js +1 -1
- package/upload/style.css +1 -1
- package/vue-devui.es.js +17291 -9726
- package/vue-devui.umd.js +24 -23
- package/date-picker/index.es.js +0 -1298
- package/date-picker/index.umd.js +0 -1
- package/date-picker/style.css +0 -1
- package/nuxt/components/DatePicker.js +0 -3
- package/nuxt/components/StickSlider.js +0 -3
- package/nuxt/components/formControlProps.js +0 -3
- package/nuxt/components/overlayEmits.js +0 -3
- package/nuxt/components/overlayProps.js +0 -3
package/table/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sort-clickable{cursor:pointer;position:absolute;top:-16px;left:50%;transform:translate(-50%);padding:8px;line-height:20px}.sort-icon-default>svg g use{fill:var(--devui-dividing-line, #dfe1e6)}.sort-icon-default>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-default:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #526ecc)}.sort-icon-asc>svg g use,.sort-icon-desc>svg g use{fill:var(--devui-icon-fill-active, #5e7ce0)}.sort-icon-asc>svg g polygon,.sort-icon-desc>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-asc:hover>svg g use,.sort-icon-desc:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #526ecc)}.sort-icon-asc>svg g polygon:last-of-type{opacity:.3}.sort-icon-desc>svg g polygon:first-of-type{opacity:.3}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay__fade-enter{opacity:0}.devui-overlay__fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay__fade-leave{opacity:1}.devui-overlay__fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay__background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay__background--color{background:rgba(0,0,0,.4)}.devui-overlay__background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay__background--disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown__menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown--fade-bottom-enter-from,.devui-dropdown--fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown--fade-bottom-enter-to,.devui-dropdown--fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown--fade-top-enter-from,.devui-dropdown--fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown--fade-top-enter-to,.devui-dropdown--fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-svg-icon{vertical-align:middle}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.5)}to{transform:rotate(360deg) scale(1)}}.devui-loading__mask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #adb0b8);opacity:.3}.devui-loading__wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:9999}.devui-loading--hidden{overflow:hidden}.devui-loading__text{margin-left:10px}.devui-loading__area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-loading__busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-loading__busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-loading__busy-default-spinner .devui-loading__bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-loading__busy-default-spinner .devui-loading__bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-button{padding:0 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border:none;border-radius:var(--devui-border-radius, 2px);border-width:1px;background-color:transparent}.devui-button:hover{cursor:pointer}.devui-button:disabled{cursor:not-allowed}.devui-button--is-loading{pointer-events:none}.devui-button--solid{color:var(--devui-light-text, #ffffff);min-width:64px}.devui-button--solid--secondary{color:var(--devui-text, #252b3a);background-color:var(--devui-dividing-line, #dfe1e6)}.devui-button--solid--secondary:hover{opacity:.8}.devui-button--solid--secondary:focus{opacity:.8}.devui-button--solid--secondary:active{opacity:.8}.devui-button--solid--secondary:disabled{opacity:.8}.devui-button--solid--primary{background-color:var(--devui-primary, #5e7ce0)}.devui-button--solid--primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:active{background-color:var(--devui-primary-active, #344899)}.devui-button--solid--primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-button--solid--danger{background-color:var(--devui-contrast, #c7000b)}.devui-button--solid--danger:hover{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:focus{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:active{background-color:var(--devui-contrast-active, #b12220)}.devui-button--solid--danger:disabled{background-color:var(--devui-contrast-disabled, #ffbcba)}.devui-button--outline{background-color:var(--devui-block, #ffffff);border-style:solid}.devui-button--outline--secondary{color:var(--devui-text, #252b3a);border-color:var(--devui-line, #adb0b8)}.devui-button--outline--secondary:hover{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:focus{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:active{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:disabled{color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-button--outline--primary{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--primary:hover{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:focus{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:active{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:disabled{opacity:.8;color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--danger{color:var(--devui-contrast, #c7000b);border-color:var(--devui-contrast, #c7000b)}.devui-button--outline--danger:hover,.devui-button--outline--danger:focus,.devui-button--outline--danger:active,.devui-button--outline--danger:disabled{opacity:.8}.devui-button--text{padding:0}.devui-button--text--secondary{color:var(--devui-text, #252b3a)}.devui-button--text--secondary:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:focus{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:active{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-button--text--primary{color:var(--devui-brand-active, #526ecc)}.devui-button--text--primary:hover{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:focus{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:active{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:disabled{opacity:.8}.devui-button--text--danger{color:var(--devui-contrast, #c7000b)}.devui-button--text--danger:hover,.devui-button--text--danger:focus,.devui-button--text--danger:active,.devui-button--text--danger:disabled{opacity:.8}.devui-button--xs{padding:0 4px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-button--sm{padding:0 16px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-button--lg{padding:0 24px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-button.devui-button__icon:not(.devui-button--solid):hover,.devui-button.devui-button__icon:not(.devui-button--solid):focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-button.devui-button__icon:not(.devui-button--solid):disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap{color:var(--devui-text, #252b3a)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap .devui-button__icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .devui-button__icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .button-content{color:var(--devui-brand, #5e7ce0)}.devui-button--circle{border-radius:100%}.devui-button--round{border-radius:20px}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-button{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}.devui-button.devui-button__icon{padding:8px;line-height:1em}.devui-button.devui-button__icon:not(.devui-button--circle){border:1px solid transparent}.devui-button.devui-button__icon.devui-button--xs,.devui-button.devui-button__icon.devui-button--sm{padding:4px;min-width:24px}.devui-button.devui-button__icon.devui-button--lg{min-width:32px}.devui-button.devui-button__icon.devui-button--lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-button.devui-button__icon.devui-button--circle.devui-button--xs,.devui-button.devui-button__icon.devui-button--circle.devui-button--sm{width:24px}.devui-button.devui-button__icon.devui-button--circle.devui-button--md{min-width:28px;width:28px}.devui-button.devui-button__icon.devui-button--circle.devui-button--lg{width:32px}.devui-button:not(.devui-button__icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-button__icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}.devui-button-group{display:flex}.devui-button-group>*{position:relative}.devui-button-group>*:not(:first-child),.devui-button-group>*:not(:first-child) .devui-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.devui-button-group>*:not(:last-child),.devui-button-group>*:not(:last-child) .devui-button{border-top-right-radius:0;border-bottom-right-radius:0}.devui-button-group>*:hover,.devui-button-group>*:active{z-index:1}.devui-button-group>*:focus-within{z-index:1}.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active .devui-checkbox--bordered,.devui-checkbox.half-checked .devui-checkbox--bordered{border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:18px;line-height:18px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label.devui-checkbox--lg{font-size:14px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered{height:40px;line-height:40px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--md{font-size:14px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered{height:36px;line-height:36px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--sm{font-size:12px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered{height:32px;line-height:32px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--xs{font-size:12px}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs.devui-checkbox--bordered{height:28px;line-height:28px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--bordered{border:1px solid var(--devui-disabled-line, #dfe1e6);border-radius:var(--devui-border-radius, 2px)}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox--list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox--list-inline div:not(:last-child){margin-right:20px}.devui-checkbox--list-inline>*{margin-top:8px}.devui-checkbox-button{display:inline-block;position:relative}.devui-checkbox-button__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox-button__content{font-size:14px;color:var(--devui-text, #252b3a);padding:10px 20px;cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left:none;display:inline-block;line-height:1;user-select:none;box-shadow:-1px 0 #e5f0fb}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:14px;padding:12px 20px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:14px;padding:10px 20px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:12px;padding:9px 15px}.devui-checkbox-button__content.devui-checkbox-button--xs{font-size:12px;padding:7px 15px}.devui-checkbox-button.active .devui-checkbox-button__content{color:#fff;background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox-button.active.disabled .devui-checkbox-button__content{color:#fff;background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox-button.disabled .devui-checkbox-button__content{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8);background-color:#fff;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);border-left:1px solid var(--devui-line, #adb0b8);box-shadow:none}.devui-checkbox-button:last-child .devui-checkbox-button__content{border-top-right-radius:var(--devui-border-radius, 2px);border-bottom-right-radius:var(--devui-border-radius, 2px)}.devui-list{padding-bottom:4px;border-radius:var(--devui-border-radius, 2px);box-sizing:border-box;background-clip:padding-box;background-color:var(--devui-connected-overlay-bg, #ffffff);outline:none}.devui-list-item{display:flex;align-items:center;width:100%;height:36px;line-height:36px;padding:0 8px;color:var(--devui-text, #252b3a);box-sizing:border-box;cursor:pointer;transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-list-item:hover{color:var(--devui-list-item-hover-text, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-list-item:active{color:var(--devui-list-item-active-text, #ffffff);background-color:var(--devui-list-item-active-bg, #5e7ce0)}.filter-wrapper{width:200px;background-color:var(--devui-connected-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.filter-wrapper .filter-all-check{padding:0 8px 4px;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.filter-wrapper .filter-multiple-menu{width:100%;padding:4px 8px;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.filter-wrapper .filter-operation{display:flex;justify-content:center;align-items:center;padding:0 8px;height:26px}.filter-wrapper .filter-single-menu{width:100%}.filter-wrapper .filter-item{display:flex;align-items:center;height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.filter-icon{display:inline-block;vertical-align:middle;cursor:pointer;height:16px;margin-top:-1px}.filter-icon>svg g{fill:var(--devui-dividing-line, #dfe1e6)}.filter-icon:hover>svg g{fill:var(--devui-icon-fill-active-hover, #526ecc)}.filter-item-active{background:var(--devui-list-item-active-bg, #5e7ce0);color:var(--devui-list-item-active-text, #ffffff)}.filter-icon-active{visibility:visible!important}.filter-icon-active>svg g{fill:var(--devui-icon-fill-active, #5e7ce0)}.filter-icon-active:hover>svg g{fill:var(--devui-icon-fill-active-hover, #526ecc)}.devui-table__thead tr{border:none;background-color:var(--devui-base-bg, #ffffff)}.devui-table__thead tr th{display:table-cell;text-align:left;padding:0;border:none;border-bottom:1px solid var(--devui-line, #adb0b8)}.devui-table__thead tr th.is-left{text-align:left}.devui-table__thead tr th.is-center{text-align:center}.devui-table__thead tr th.is-right{text-align:right}.devui-table__thead tr .operable:hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__thead tr .resizeable:hover .resize-handle{border-right:1px solid var(--devui-line, #adb0b8)}.devui-table__thead tr .resizeable .resize-handle:hover{border-right:2px solid var(--devui-form-control-line-active, #5e7ce0)}.devui-table__thead tr .sort-active,.devui-table__thead tr .filter-active{background-color:var(--devui-list-item-hover-bg, #f2f5fc);border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-table__thead .header-container{position:relative;display:flex;align-items:center;padding-left:20px;padding-right:8px}.devui-table__thead .header-container .title{display:inline-block;width:calc(100% - 18px);font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);font-weight:700;line-height:36px;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.devui-table__thead .header-container .resize-handle{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize}.devui-table__thead .header-container .resize-overlay{position:absolute;display:block;top:0;left:0;bottom:0;right:0;z-index:1000}.devui-table--header-bg thead.devui-table__thead tr{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__tbody tr{font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);background-color:var(--devui-base-bg, #ffffff);border:none}.devui-table__tbody tr.hover-enabled:hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__tbody tr td .icon-expand-row:hover{cursor:pointer}.devui-table__tbody tr.expanded td .icon-expand-row{transform:rotate(90deg)}.devui-table__tbody tr td{background-clip:padding-box;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;border:none;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table__tbody tr td.is-left{text-align:left}.devui-table__tbody tr td.is-center{text-align:center}.devui-table__tbody tr td.is-right{text-align:right}.devui-table--sticky-cell{position:sticky;z-index:5;background-color:inherit}.devui-table--sticky-cell.left{box-shadow:#0000000d var(--devui-shadow-length-slide-right, 2px 0 8px 0)}.devui-table--sticky-cell.right{box-shadow:#0000000d var(--devui-shadow-length-slide-left, -2px 0 8px 0)}.devui-tooltip{max-width:200px;min-height:26px;padding:4px 16px;font-size:var(--devui-font-size, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:var(--devui-border-radius-feedback, 4px);font-style:normal;font-weight:400;line-break:auto;text-decoration:none;text-shadow:none;text-transform:none;word-spacing:normal;white-space:normal;opacity:1;z-index:var(--devui-z-index-pop-up, 1060)}.devui-tooltip--fade-bottom-enter-from,.devui-tooltip--fade-bottom-leave-to,.devui-tooltip--fade-top-enter-from,.devui-tooltip--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-tooltip--fade-bottom-enter-to,.devui-tooltip--fade-bottom-leave-from,.devui-tooltip--fade-top-enter-to,.devui-tooltip--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-tooltip--fade-bottom-enter-active,.devui-tooltip--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-bottom-leave-active,.devui-tooltip--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-tooltip--fade-left-enter-from,.devui-tooltip--fade-left-leave-to,.devui-tooltip--fade-right-enter-from,.devui-tooltip--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-tooltip--fade-left-enter-to,.devui-tooltip--fade-left-leave-from,.devui-tooltip--fade-right-enter-to,.devui-tooltip--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-tooltip--fade-left-enter-active,.devui-tooltip--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-left-leave-active,.devui-tooltip--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-table{position:relative;width:100%;overflow-x:auto}.devui-table .hidden-columns{position:absolute;visibility:hidden;z-index:-1}.devui-table__view{display:table;table-layout:fixed;width:100%;border-spacing:0;border-collapse:collapse;border:none;margin:0;padding:0}.devui-table--striped tbody tr:nth-child(even){background-color:var(--devui-list-item-strip-bg, #f2f5fc)}.devui-table__empty{padding:40px 0;background-color:var(--devui-base-bg, #ffffff)}.devui-table__fix-header{display:flex;flex-direction:column;position:relative;height:100%}.devui-table__scroll-view{flex:1;overflow:scroll}.devui-table--layout-auto{table-layout:auto}.devui-table--sm tbody>tr>td{font-size:var(--devui-font-size-sm, 12px);padding:7px 20px 8px}.devui-table--sm tbody>tr>td.devui-table__checkable-cell{padding:8px}.devui-table--sm thead>tr>th.devui-table__checkable-cell{padding:8px}.devui-table--md tbody>tr>td{font-size:var(--devui-font-size-md, 12px);padding:11px 20px 12px}.devui-table--md thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--lg tbody>tr>td{font-size:var(--devui-font-size-lg, 14px);padding:15px 20px 16px}.devui-table--lg thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--borderless tbody>tr>td{border-bottom:none}.devui-table--bordered tr{border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered tr td{border-right:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered thead tr th:first-child{border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered thead tr th{border-top:1px solid var(--devui-dividing-line, #dfe1e6);border-right:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table .resize-bar{display:none;position:absolute;top:0;bottom:0;width:2px;background-color:var(--devui-form-control-line-active, #5e7ce0);z-index:9999;cursor:col-resize}.table-selector{user-select:none;cursor:col-resize}
|
|
1
|
+
.devui-table__sort-clickable{flex:1;height:20px;line-height:20px;margin-left:8px;margin-right:4px;vertical-align:-.55em;cursor:pointer}.devui-table__sort-default>svg g use{fill:var(--devui-dividing-line, #f2f2f3)}.devui-table__sort-default>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.devui-table__sort-default:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #252b3a)}.devui-table__sort-asc>svg g use,.devui-table__sort-desc>svg g use{fill:var(--devui-icon-fill-active, #252b3a)}.devui-table__sort-asc>svg g polygon,.devui-table__sort-desc>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.devui-table__sort-asc:hover>svg g use,.devui-table__sort-desc:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #252b3a)}.devui-table__sort-asc>svg g polygon:last-of-type{opacity:.3}.devui-table__sort-desc>svg g polygon:first-of-type{opacity:.3}.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown__menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown--fade-bottom-enter-from,.devui-dropdown--fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown--fade-bottom-enter-to,.devui-dropdown--fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown--fade-top-enter-from,.devui-dropdown--fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown--fade-top-enter-to,.devui-dropdown--fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.5)}to{transform:rotate(360deg) scale(1)}}.devui-loading__mask{z-index:var(--devui-z-index-full-page-overlay, 1080);position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #d7d8da);opacity:.3}.devui-loading__wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:var(--devui-z-index-full-page-overlay, 1080)}.devui-loading--hidden{overflow:hidden}.devui-loading__text{margin-left:10px}.devui-loading__area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-loading__busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-loading__busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-loading__busy-default-spinner .devui-loading__bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-loading__busy-default-spinner .devui-loading__bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-button{padding:var(--devui-btn-padding, 0 20px);font-size:var(--devui-font-size-md, 14px);line-height:var(--devui-line-height-base, 1.5);border-radius:var(--devui-border-radius, 4px);border-width:1px;border-color:transparent;background-color:transparent}.devui-button:hover{cursor:pointer}.devui-button:disabled{cursor:not-allowed}.devui-button--is-loading{pointer-events:none}.devui-button--solid{color:var(--devui-light-text, #ffffff);min-width:64px}.devui-button--solid i{color:var(--devui-light-text, #ffffff)}.devui-button--solid--secondary{color:var(--devui-text, #252b3a);border-color:var(--devui-btn-common-border-color, var(--devui-line, #d7d8da));background-color:var(--devui-btn-common-bg, var(--devui-base-bg, #ffffff))}.devui-button--solid--secondary:hover{color:var(--devui-btn-common-color-hover, var(--devui-brand-active, #526ecc));border-color:var(--devui-btn-common-border-color-hover, var(--devui-form-control-line-active, #5e7ce0));background-color:var(--devui-btn-common-bg-hover, var(--devui-base-bg, #ffffff))}.devui-button--solid--secondary:focus{color:var(--devui-btn-common-color-active, var(--devui-brand-active, #526ecc));border-color:var(--devui-btn-common-border-color-active, var(--devui-form-control-line-active, #5e7ce0));background-color:var(--devui-btn-common-bg-hover, var(--devui-base-bg, #ffffff))}.devui-button--solid--secondary:active{color:var(--devui-btn-common-color-active, var(--devui-brand-active, #526ecc));border-color:var(--devui-btn-common-border-color-active, var(--devui-form-control-line-active, #5e7ce0));background-color:var(--devui-btn-common-bg-hover, var(--devui-base-bg, #ffffff))}.devui-button--solid--secondary:disabled{opacity:.8}.devui-button--solid--primary{background-color:var(--devui-primary, #5e7ce0)}.devui-button--solid--primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:active{background-color:var(--devui-primary-active, #344899)}.devui-button--solid--primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-button--solid--danger{background-color:var(--devui-contrast, #c7000b)}.devui-button--solid--danger:hover{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:focus{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:active{background-color:var(--devui-contrast-active, #b12220)}.devui-button--solid--danger:disabled{background-color:var(--devui-contrast-disabled, #ffbcba)}.devui-button--outline{background-color:var(--devui-block, #ffffff);border-style:solid}.devui-button--outline--secondary{color:var(--devui-text, #252b3a);border-color:var(--devui-line, #d7d8da)}.devui-button--outline--secondary:hover{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:focus{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:active{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:disabled{color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-button--outline--primary{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--primary:hover{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:focus{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:active{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:disabled{opacity:.8;color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--danger{color:var(--devui-contrast, #c7000b);border-color:var(--devui-contrast, #c7000b)}.devui-button--outline--danger:hover,.devui-button--outline--danger:focus,.devui-button--outline--danger:active,.devui-button--outline--danger:disabled{opacity:.8}.devui-button--text{padding:0}.devui-button--text--secondary{color:var(--devui-text, #252b3a)}.devui-button--text--secondary:hover{color:var(--devui-list-item-hover-text, #252b3a)}.devui-button--text--secondary:focus{color:var(--devui-list-item-hover-text, #252b3a)}.devui-button--text--secondary:active{color:var(--devui-list-item-hover-text, #252b3a)}.devui-button--text--secondary:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-button--text--primary{color:var(--devui-brand-active, #526ecc)}.devui-button--text--primary:hover{color:var(--devui-link-active, #526ecc)}.devui-button--text--primary:focus{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:active{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:disabled{opacity:.8}.devui-button--text--danger{color:var(--devui-contrast, #c7000b)}.devui-button--text--danger:hover,.devui-button--text--danger:focus,.devui-button--text--danger:active,.devui-button--text--danger:disabled{opacity:.8}.devui-button--xs{padding:0 4px;height:20px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-button--sm{padding:var(--devui-btn-sm-padding, 0 16px);height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-button--lg{padding:var(--devui-btn-lg-padding, 0 24px);height:36px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-button.devui-button__icon:not(.devui-button--solid):hover,.devui-button.devui-button__icon:not(.devui-button--solid):focus{border:1px solid var(--devui-list-item-hover-bg, #f2f2f3);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-button.devui-button__icon:not(.devui-button--solid):disabled{background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap{color:var(--devui-text, #252b3a)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap .devui-button__icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover{color:var(--devui-list-item-hover-text, #252b3a)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .devui-button__icon-fix{color:var(--devui-icon-fill-active, #252b3a)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .button-content{color:var(--devui-brand, #5e7ce0)}.devui-button--circle{border-radius:100%}.devui-button--round{border-radius:20px}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-button{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;border-style:solid}.devui-button.devui-button__icon{padding:8px;line-height:1em;min-width:unset}.devui-button.devui-button__icon:not(.devui-button--circle){border:1px solid transparent}.devui-button.devui-button__icon.devui-button--xs,.devui-button.devui-button__icon.devui-button--sm{padding:4px;min-width:24px}.devui-button.devui-button__icon.devui-button--lg{min-width:32px}.devui-button.devui-button__icon.devui-button--lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-button.devui-button__icon.devui-button--circle.devui-button--xs,.devui-button.devui-button__icon.devui-button--circle.devui-button--sm{width:24px}.devui-button.devui-button__icon.devui-button--circle.devui-button--lg{width:32px}.devui-button:not(.devui-button__icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-button__icon-fix{position:relative;font-size:var(--devui-font-size, 14px)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}.devui-button-group{display:flex}.devui-button-group>*{position:relative}.devui-button-group>*:not(:first-child),.devui-button-group>*:not(:first-child) .devui-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.devui-button-group>*:not(:first-child).devui-button--solid--primary,.devui-button-group>*:not(:first-child) .devui-button.devui-button--solid--primary{border-left:1px solid var(--devui-brand-hover, #7693f5);margin-left:0}.devui-button-group>*:not(:last-child),.devui-button-group>*:not(:last-child) .devui-button{border-top-right-radius:0;border-bottom-right-radius:0}.devui-button-group>*:hover,.devui-button-group>*:active{z-index:1}.devui-button-group>*:focus-within{z-index:1}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 14px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 14px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active .devui-checkbox--bordered,.devui-checkbox.half-checked .devui-checkbox--bordered{border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #d7d8da);border-radius:var(--devui-border-radius, 4px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat 50%/0;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label.devui-checkbox--lg{font-size:var(--devui-font-size-lg, 14px)}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered{height:40px;line-height:40px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--md{font-size:var(--devui-font-size-lg, 14px)}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered{height:36px;line-height:36px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--sm{font-size:var(--devui-font-size-sm, 12px)}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered{height:32px;line-height:32px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--xs{font-size:var(--devui-font-size-sm, 12px)}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs.devui-checkbox--bordered{height:28px;line-height:28px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--bordered{border:1px solid var(--devui-disabled-line, #dfe1e6);border-radius:var(--devui-border-radius, 4px)}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox--list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox--list-inline div:not(:last-child){margin-right:20px}.devui-checkbox--list-inline>*{margin-top:8px}.devui-checkbox-button{display:inline-block;position:relative}.devui-checkbox-button__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox-button__content{font-size:14px;color:var(--devui-text, #252b3a);padding:10px 20px;cursor:pointer;border:1px solid var(--devui-disabled-line, #dfe1e6);border-left:none;display:inline-block;line-height:1;user-select:none;box-shadow:-1px 0 0 0 var(--devui-disabled-line, #dfe1e6)}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:var(--devui-font-size-lg, 14px);padding:12px 20px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:var(--devui-font-size-lg, 14px);padding:10px 20px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:var(--devui-font-size-sm, 12px);padding:9px 15px}.devui-checkbox-button__content.devui-checkbox-button--xs{font-size:var(--devui-font-size-sm, 12px);padding:7px 15px}.devui-checkbox-button.active .devui-checkbox-button__content{color:#fff;background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox-button.active.disabled .devui-checkbox-button__content{color:#fff;background-color:var(--devui-icon-fill-active-disabled, #beccfa);border-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox-button.disabled .devui-checkbox-button__content{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8);background-color:#fff;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 4px);border-bottom-left-radius:var(--devui-border-radius, 4px);border-left:1px solid var(--devui-disabled-line, #dfe1e6);box-shadow:none}.devui-checkbox-button:last-child .devui-checkbox-button__content{border-top-right-radius:var(--devui-border-radius, 4px);border-bottom-right-radius:var(--devui-border-radius, 4px)}.devui-list{padding-bottom:4px;border-radius:var(--devui-border-radius, 4px);box-sizing:border-box;background-clip:padding-box;background-color:var(--devui-connected-overlay-bg, #ffffff);outline:none}.devui-list-item{display:flex;align-items:center;width:100%;height:36px;line-height:36px;padding:0 8px;color:var(--devui-text, #252b3a);box-sizing:border-box;cursor:pointer;transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-list-item:hover{color:var(--devui-list-item-hover-text, #252b3a);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-list-item:active{color:var(--devui-list-item-active-text, #252b3a);background-color:var(--devui-list-item-active-bg, #f2f5fc)}.filter-wrapper{width:200px;background-color:var(--devui-connected-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 4px)}.filter-wrapper .filter-all-check{padding:0 8px 4px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.filter-wrapper .filter-multiple-menu{width:100%;padding:4px 8px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.filter-wrapper .filter-operation{display:flex;justify-content:center;align-items:center;padding:0 8px;height:26px}.filter-wrapper .filter-single-menu{width:100%}.filter-wrapper .filter-item{display:flex;align-items:center;height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.filter-icon{flex:1;display:block;height:16px;text-align:right;cursor:pointer}.filter-icon>svg g{fill:var(--devui-dividing-line, #f2f2f3)}.filter-icon:hover>svg g{fill:var(--devui-icon-fill-active-hover, #252b3a)}.filter-item-active{background:var(--devui-list-item-active-bg, #f2f5fc);color:var(--devui-list-item-active-text, #252b3a)}.filter-icon-active{visibility:visible!important}.filter-icon-active>svg g{fill:var(--devui-icon-fill-active, #252b3a)}.filter-icon-active:hover>svg g{fill:var(--devui-icon-fill-active-hover, #252b3a)}.devui-table__thead tr{border:none;background-color:var(--devui-base-bg, #ffffff)}.devui-table__thead tr th{display:table-cell;text-align:left;padding:0;border:none;border-bottom:1px solid var(--devui-line, #d7d8da)}.devui-table__thead tr th.is-left{text-align:left}.devui-table__thead tr th.is-center{text-align:center}.devui-table__thead tr th.is-right{text-align:right}.devui-table__thead tr .operable:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-table__thead tr .resizeable:hover .resize-handle{border-right:1px solid var(--devui-line, #d7d8da)}.devui-table__thead tr .resizeable .resize-handle:hover{border-right:2px solid var(--devui-form-control-line-active, #5e7ce0)}.devui-table__thead tr .sort-active,.devui-table__thead tr .filter-active{background-color:var(--devui-list-item-hover-bg, #f2f2f3);border-radius:var(--devui-border-radius, 4px) 0 0 var(--devui-border-radius, 4px)}.devui-table__thead .header-container{position:relative;display:flex;align-items:center;padding-left:20px;padding-right:8px}.devui-table__thead .header-container .title{display:inline-block;max-width:calc(100% - 18px);font-size:var(--devui-font-size, 14px);color:var(--devui-text, #252b3a);font-weight:700;line-height:36px;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.devui-table__thead .header-container .resize-handle{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize}.devui-table__thead .header-container .resize-overlay{position:absolute;display:block;top:0;left:0;bottom:0;right:0;z-index:1000}.devui-table__thead .devui-table__checkable-cell .header-container{padding-left:0}.devui-table--header-bg thead.devui-table__thead tr{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__tbody tr{font-size:var(--devui-font-size, 14px);color:var(--devui-text, #252b3a);background-color:var(--devui-base-bg, #ffffff);border:none}.devui-table__tbody tr.hover-enabled:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-table__tbody tr td .icon-expand-row:hover{cursor:pointer}.devui-table__tbody tr.expanded td .icon-expand-row{transform:rotate(45deg)}.devui-table__tbody tr td{background-clip:padding-box;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;border:none;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-table__tbody tr td.is-left{text-align:left}.devui-table__tbody tr td.is-center{text-align:center}.devui-table__tbody tr td.is-right{text-align:right}.devui-table__tbody tr td .editable-cell{position:relative;cursor:pointer}.devui-table__tbody tr td .editable-cell:hover:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;border:1px solid var(--devui-line, #d7d8da);border-radius:var(--devui-border-radius, 4px);pointer-events:none}.devui-table__tbody tr td .devui-table__cell .cell-text{height:28px;line-height:28px;padding-left:8px;overflow:hidden;text-overflow:ellipsis}.devui-table__tbody .is-hidden{display:none}.devui-table__lazy__flag{width:0;height:0}.devui-table--sticky-cell{position:sticky;z-index:5;background-color:inherit}.devui-table--sticky-cell.left{box-shadow:#0000000d var(--devui-shadow-length-slide-right, 2px 0 8px 0)}.devui-table--sticky-cell.right{box-shadow:#0000000d var(--devui-shadow-length-slide-left, -2px 0 8px 0)}.devui-tooltip{max-width:200px;min-height:26px;padding:4px 16px;font-size:var(--devui-font-size, 14px);color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:var(--devui-border-radius-feedback, 4px);font-style:normal;font-weight:400;line-break:auto;text-decoration:none;text-shadow:none;text-transform:none;word-spacing:normal;white-space:normal;opacity:1;z-index:var(--devui-z-index-pop-up, 1060)}.devui-tooltip--fade-bottom-enter-from,.devui-tooltip--fade-bottom-leave-to,.devui-tooltip--fade-top-enter-from,.devui-tooltip--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-tooltip--fade-bottom-enter-to,.devui-tooltip--fade-bottom-leave-from,.devui-tooltip--fade-top-enter-to,.devui-tooltip--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-tooltip--fade-bottom-enter-active,.devui-tooltip--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-bottom-leave-active,.devui-tooltip--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-tooltip--fade-left-enter-from,.devui-tooltip--fade-left-leave-to,.devui-tooltip--fade-right-enter-from,.devui-tooltip--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-tooltip--fade-left-enter-to,.devui-tooltip--fade-left-leave-from,.devui-tooltip--fade-right-enter-to,.devui-tooltip--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-tooltip--fade-left-enter-active,.devui-tooltip--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-left-leave-active,.devui-tooltip--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-table{position:relative;display:flex;width:100%;overflow-x:auto}.devui-table .hidden-columns{position:absolute;visibility:hidden;z-index:-1}.devui-table__container{flex:1;overflow:auto}.devui-table__view{display:table;table-layout:fixed;width:100%;border-spacing:0;border-collapse:collapse;border:none;margin:0;padding:0}.devui-table--striped tbody tr:nth-child(even){background-color:var(--devui-list-item-strip-bg, #f2f5fc)}.devui-table__empty{padding:40px 0;background-color:var(--devui-base-bg, #ffffff)}.devui-table__fix-header{display:flex;flex-direction:column;position:relative;height:100%}.devui-table__scroll-view{flex:1;overflow:scroll}.devui-table--layout-auto{table-layout:auto}.devui-table--sm tbody>tr>td{font-size:var(--devui-font-size-sm, 12px);padding:7px 20px 8px}.devui-table--sm tbody>tr>td.devui-table__checkable-cell{padding:8px}.devui-table--sm thead>tr>th.devui-table__checkable-cell{padding:8px}.devui-table--md tbody>tr>td{font-size:var(--devui-font-size-md, 14px);padding:11px 20px 12px}.devui-table--md thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--lg tbody>tr>td{font-size:var(--devui-font-size-lg, 14px);padding:15px 20px 16px}.devui-table--lg thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--borderless tbody>tr>td{border-bottom:none}.devui-table--bordered tr{border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-table--bordered tr td{border-right:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-table--bordered thead tr th:first-child{border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-table--bordered thead tr th{border-top:1px solid var(--devui-dividing-line, #f2f2f3);border-right:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-table .resize-bar{display:none;position:absolute;top:0;bottom:0;width:2px;background-color:var(--devui-form-control-line-active, #5e7ce0);z-index:var(--devui-z-index-function-widget, 999);cursor:col-resize}.table-selector{user-select:none;cursor:col-resize}.devui-table__tbody tr .devui-table__tree-operate{padding-right:8px;cursor:pointer}.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon rect{stroke:var(--devui-disabled-text, #adb0b8)}.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon path{fill:var(--devui-disabled-text, #adb0b8)}.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon.svg-icon-close rect:last-child{fill:var(--devui-disabled-text, #adb0b8);stroke:none}.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon rect{stroke:var(--devui-icon-fill-active, #252b3a)}.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon path{fill:var(--devui-icon-fill-active, #252b3a)}.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon.svg-icon-close rect:last-child{fill:var(--devui-icon-fill-active, #252b3a);stroke:none}.devui-table__tbody tr .devui-table__tree-operate .svg-icon{transform:translateY(20%)}
|
package/tabs/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { toRefs, computed, defineComponent, shallowRef, reactive, inject, onUpdated, onBeforeMount, onMounted, createVNode, provide, mergeProps } from "vue";
|
|
1
|
+
import { toRefs, computed, defineComponent, shallowRef, reactive, inject, onUpdated, onBeforeMount, onMounted, watch, createVNode, resolveComponent, provide, mergeProps, onUnmounted } from "vue";
|
|
2
2
|
const tabsProps = {
|
|
3
3
|
modelValue: {
|
|
4
4
|
type: [String, Number],
|
|
@@ -12,10 +12,6 @@ const tabsProps = {
|
|
|
12
12
|
type: Boolean,
|
|
13
13
|
default: true
|
|
14
14
|
},
|
|
15
|
-
vertical: {
|
|
16
|
-
type: Boolean,
|
|
17
|
-
default: false
|
|
18
|
-
},
|
|
19
15
|
reactivable: {
|
|
20
16
|
type: Boolean,
|
|
21
17
|
default: true
|
|
@@ -31,8 +27,21 @@ const tabsProps = {
|
|
|
31
27
|
beforeChange: {
|
|
32
28
|
type: Function,
|
|
33
29
|
default: null
|
|
30
|
+
},
|
|
31
|
+
closeable: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
default: false
|
|
34
|
+
},
|
|
35
|
+
addable: {
|
|
36
|
+
type: Boolean,
|
|
37
|
+
default: false
|
|
38
|
+
},
|
|
39
|
+
tabPosition: {
|
|
40
|
+
type: String,
|
|
41
|
+
default: "top"
|
|
34
42
|
}
|
|
35
43
|
};
|
|
44
|
+
var tabs = "";
|
|
36
45
|
function createBem(namespace, element, modifier) {
|
|
37
46
|
let cls = namespace;
|
|
38
47
|
if (element) {
|
|
@@ -56,20 +65,59 @@ function useNamespace(block, needDot = false) {
|
|
|
56
65
|
em
|
|
57
66
|
};
|
|
58
67
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const { cssClass, vertical } = toRefs(props);
|
|
68
|
+
const ns$1 = useNamespace("tabs");
|
|
69
|
+
function useTabNavRender(props, data) {
|
|
70
|
+
const { cssClass, tabPosition, customWidth } = toRefs(props);
|
|
63
71
|
const ulClasses = computed(() => ({
|
|
64
|
-
[ns.e("nav")]: true,
|
|
65
|
-
[ns.em("nav", props.type)]: true,
|
|
72
|
+
[ns$1.e("nav")]: true,
|
|
73
|
+
[ns$1.em("nav", props.type)]: true,
|
|
66
74
|
[cssClass.value]: Boolean(cssClass.value),
|
|
67
|
-
[ns.
|
|
75
|
+
[ns$1.em("nav", "top")]: tabPosition.value === "top",
|
|
76
|
+
[ns$1.em("nav", "right")]: tabPosition.value === "right",
|
|
77
|
+
[ns$1.em("nav", "bottom")]: tabPosition.value === "bottom",
|
|
78
|
+
[ns$1.em("nav", "left")]: tabPosition.value === "left"
|
|
79
|
+
}));
|
|
80
|
+
const aClasses = computed(() => ({
|
|
81
|
+
["custom-width"]: Boolean(customWidth.value)
|
|
68
82
|
}));
|
|
69
|
-
|
|
83
|
+
const customStyle = {
|
|
84
|
+
width: props.customWidth ? props.customWidth : ""
|
|
85
|
+
};
|
|
86
|
+
const sliderAnimationStyle = computed(() => {
|
|
87
|
+
if (["top", "bottom"].includes(props.tabPosition)) {
|
|
88
|
+
return {
|
|
89
|
+
left: data.offsetLeft + "px",
|
|
90
|
+
width: data.offsetWidth + "px"
|
|
91
|
+
};
|
|
92
|
+
} else {
|
|
93
|
+
return {
|
|
94
|
+
top: data.offsetTop + "px",
|
|
95
|
+
height: data.offsetHeight + "px",
|
|
96
|
+
width: data.offsetWidth + "px"
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
return { ulClasses, aClasses, customStyle, sliderAnimationStyle };
|
|
70
101
|
}
|
|
71
102
|
function useTabNavFunction(props, tabs2, data, ctx, tabsEle) {
|
|
72
|
-
const
|
|
103
|
+
const update = () => {
|
|
104
|
+
if (props.type === "slider") {
|
|
105
|
+
setTimeout(() => {
|
|
106
|
+
var _a;
|
|
107
|
+
const tabEle = (_a = tabsEle.value) == null ? void 0 : _a.querySelector("#" + props.modelValue + ".active");
|
|
108
|
+
if (tabEle && tabsEle.value) {
|
|
109
|
+
if (["top", "bottom"].includes(props.tabPosition)) {
|
|
110
|
+
data.offsetLeft = tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left;
|
|
111
|
+
} else {
|
|
112
|
+
data.offsetTop = tabEle.getBoundingClientRect().top - tabsEle.value.getBoundingClientRect().top;
|
|
113
|
+
data.offsetHeight = tabEle.getBoundingClientRect().height;
|
|
114
|
+
}
|
|
115
|
+
data.offsetWidth = tabEle.getBoundingClientRect().width;
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
const canChange = (currentTab) => {
|
|
73
121
|
let changeResult = Promise.resolve(true);
|
|
74
122
|
if (typeof props.beforeChange === "function") {
|
|
75
123
|
const result = props.beforeChange(currentTab);
|
|
@@ -83,106 +131,181 @@ function useTabNavFunction(props, tabs2, data, ctx, tabsEle) {
|
|
|
83
131
|
}
|
|
84
132
|
return changeResult;
|
|
85
133
|
};
|
|
86
|
-
const activeClick =
|
|
134
|
+
const activeClick = (item, tabEl) => {
|
|
87
135
|
if (!props.reactivable && props.modelValue === item.id) {
|
|
88
136
|
return;
|
|
89
137
|
}
|
|
90
138
|
canChange(item.id).then((change) => {
|
|
139
|
+
var _a, _b;
|
|
91
140
|
if (!change) {
|
|
92
141
|
return;
|
|
93
142
|
}
|
|
94
|
-
const tab2 = tabs2.state.data.find((itemOption) => itemOption.id === item.id);
|
|
95
|
-
if (tab2 && !tab2.disabled) {
|
|
143
|
+
const tab2 = (_b = (_a = tabs2 == null ? void 0 : tabs2.state) == null ? void 0 : _a.data) == null ? void 0 : _b.find((itemOption) => itemOption.id === item.id);
|
|
144
|
+
if (tabs2 && tab2 && !tab2.disabled) {
|
|
96
145
|
tabs2.state.active = item.id;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
146
|
+
if (props.type === "slider" && tabEl && tabsEle && tabsEle.value) {
|
|
147
|
+
if (["left", "right"].includes(props.tabPosition)) {
|
|
148
|
+
data.offsetLeft = tabEl.getBoundingClientRect().left - tabsEle.value.nativeElement.getBoundingClientRect().left;
|
|
149
|
+
} else {
|
|
150
|
+
data.offsetTop = tabEl.getBoundingClientRect().top - tabsEle.value.nativeElement.getBoundingClientRect().top;
|
|
151
|
+
data.offsetHeight = tabEl.getBoundingClientRect().height;
|
|
152
|
+
}
|
|
100
153
|
data.offsetWidth = tabEl.getBoundingClientRect().width;
|
|
101
154
|
}
|
|
102
155
|
ctx.emit("active-tab-change", tab2.id);
|
|
103
156
|
}
|
|
104
157
|
});
|
|
105
158
|
};
|
|
106
|
-
|
|
159
|
+
const beforeMount = () => {
|
|
160
|
+
if (props.type !== "slider" && props.modelValue === void 0 && (tabs2 == null ? void 0 : tabs2.state.data) && tabs2.state.data.length > 0) {
|
|
161
|
+
activeClick(tabs2.state.data[0]);
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
const mounted = () => {
|
|
165
|
+
var _a;
|
|
166
|
+
if (props.type === "slider" && props.modelValue === void 0 && (tabs2 == null ? void 0 : tabs2.state.data) && tabs2.state.data.length > 0 && tabs2.state.data[0]) {
|
|
167
|
+
const tabsStateData = tabs2.state.data[0];
|
|
168
|
+
const dom = (_a = tabsStateData.tabsEle) == null ? void 0 : _a.value;
|
|
169
|
+
const ele = dom == null ? void 0 : dom.getElementById(tabsStateData.tabId);
|
|
170
|
+
activeClick(ele);
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
const tabCanClose = (item) => {
|
|
174
|
+
return (props.closeable || item.closeable) && !item.disabled;
|
|
175
|
+
};
|
|
176
|
+
return { update, activeClick, beforeMount, mounted, tabCanClose };
|
|
177
|
+
}
|
|
178
|
+
function useTabNavEvent(ctx) {
|
|
179
|
+
const onTabRemove = (item, ev) => {
|
|
180
|
+
ev.stopPropagation();
|
|
181
|
+
ctx.emit("tab-remove", item, ev);
|
|
182
|
+
ctx.emit("tab-change", item.id, "delete");
|
|
183
|
+
};
|
|
184
|
+
const onTabAdd = () => {
|
|
185
|
+
ctx.emit("tab-add");
|
|
186
|
+
ctx.emit("tab-change", void 0, "add");
|
|
187
|
+
};
|
|
188
|
+
return { onTabRemove, onTabAdd };
|
|
107
189
|
}
|
|
108
190
|
var tabNav = "";
|
|
109
191
|
var TabNav = defineComponent({
|
|
110
192
|
name: "DTabNav",
|
|
111
193
|
props: tabsProps,
|
|
112
|
-
emits: ["
|
|
194
|
+
emits: ["active-tab-change", "tab-remove", "tab-add", "tab-change"],
|
|
113
195
|
setup(props, ctx) {
|
|
114
196
|
const ns2 = useNamespace("tabs");
|
|
115
197
|
const tabsEle = shallowRef();
|
|
116
198
|
const data = reactive({
|
|
117
199
|
offsetLeft: 0,
|
|
118
200
|
offsetWidth: 0,
|
|
201
|
+
offsetTop: 0,
|
|
202
|
+
offsetHeight: 0,
|
|
119
203
|
id: null
|
|
120
204
|
});
|
|
121
205
|
const tabs2 = inject("tabs");
|
|
122
206
|
const {
|
|
123
|
-
ulClasses
|
|
124
|
-
|
|
207
|
+
ulClasses,
|
|
208
|
+
aClasses,
|
|
209
|
+
customStyle,
|
|
210
|
+
sliderAnimationStyle
|
|
211
|
+
} = useTabNavRender(props, data);
|
|
125
212
|
const {
|
|
126
|
-
|
|
213
|
+
update,
|
|
214
|
+
beforeMount,
|
|
215
|
+
mounted,
|
|
216
|
+
activeClick,
|
|
217
|
+
tabCanClose
|
|
127
218
|
} = useTabNavFunction(props, tabs2, data, ctx, tabsEle);
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (props.type !== "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0) {
|
|
141
|
-
activeClick(tabs2.state.data[0]);
|
|
142
|
-
}
|
|
143
|
-
});
|
|
144
|
-
onMounted(() => {
|
|
145
|
-
if (props.type === "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0 && tabs2.state.data[0]) {
|
|
146
|
-
activeClick(tabs2.state.data[0].tabsEle.value.getElementById(tabs2.state.data[0].tabId));
|
|
219
|
+
const {
|
|
220
|
+
onTabRemove,
|
|
221
|
+
onTabAdd
|
|
222
|
+
} = useTabNavEvent(ctx);
|
|
223
|
+
onUpdated(() => update());
|
|
224
|
+
onBeforeMount(() => beforeMount());
|
|
225
|
+
onMounted(() => mounted());
|
|
226
|
+
watch(() => props.modelValue, () => {
|
|
227
|
+
var _a;
|
|
228
|
+
const tab2 = (_a = tabs2 == null ? void 0 : tabs2.state.data) == null ? void 0 : _a.find((item) => item.id === props.modelValue);
|
|
229
|
+
if (tab2) {
|
|
230
|
+
activeClick(tab2);
|
|
147
231
|
}
|
|
148
232
|
});
|
|
149
233
|
return () => {
|
|
234
|
+
const closeIconEl = (item) => {
|
|
235
|
+
return tabCanClose(item) ? createVNode("span", {
|
|
236
|
+
"class": ns2.e("close-btn"),
|
|
237
|
+
"onClick": (ev) => onTabRemove(item, ev)
|
|
238
|
+
}, [createVNode(resolveComponent("d-icon"), {
|
|
239
|
+
"size": "12px",
|
|
240
|
+
"name": "error-o"
|
|
241
|
+
}, null)]) : null;
|
|
242
|
+
};
|
|
243
|
+
const newButton = props.addable ? createVNode("li", {
|
|
244
|
+
"class": ns2.e("new-tab"),
|
|
245
|
+
"onClick": onTabAdd
|
|
246
|
+
}, [createVNode(resolveComponent("d-icon"), {
|
|
247
|
+
"name": "add"
|
|
248
|
+
}, null)]) : null;
|
|
150
249
|
return createVNode("ul", {
|
|
151
250
|
"ref": tabsEle,
|
|
152
251
|
"role": "tablist",
|
|
153
252
|
"class": ulClasses.value
|
|
154
|
-
}, [(tabs2.state.data || []).map((item, i) => {
|
|
253
|
+
}, [((tabs2 == null ? void 0 : tabs2.state.data) || []).map((item, i) => {
|
|
254
|
+
var _a, _b;
|
|
155
255
|
return createVNode("li", {
|
|
156
256
|
"role": "presentation",
|
|
157
257
|
"onClick": () => {
|
|
158
258
|
activeClick(item);
|
|
159
259
|
},
|
|
160
|
-
"class": (props.modelValue === (item.id || item.tabId) ? "active" : "") +
|
|
260
|
+
"class": (props.modelValue === (item.id || item.tabId) ? "active" : "") + (item.disabled ? " disabled" : ""),
|
|
161
261
|
"id": item.id || item.tabId
|
|
262
|
+
}, [createVNode("span", {
|
|
263
|
+
"class": ns2.e("nav-content")
|
|
162
264
|
}, [createVNode("a", {
|
|
163
265
|
"role": "tab",
|
|
164
266
|
"data-toggle": item.id,
|
|
165
|
-
"aria-expanded": props.modelValue === (item.id || item.tabId)
|
|
166
|
-
|
|
167
|
-
|
|
267
|
+
"aria-expanded": props.modelValue === (item.id || item.tabId),
|
|
268
|
+
"class": aClasses.value,
|
|
269
|
+
"style": customStyle
|
|
270
|
+
}, [(tabs2 == null ? void 0 : tabs2.state.slots[i]) ? (_b = (_a = tabs2.state.slots)[i]) == null ? void 0 : _b.call(_a) : createVNode("span", null, [item.title])]), closeIconEl(item)])]);
|
|
271
|
+
}), newButton, createVNode("div", {
|
|
168
272
|
"class": ns2.e(`nav-${props.type}-animation`),
|
|
169
|
-
"style":
|
|
170
|
-
left: data.offsetLeft + "px",
|
|
171
|
-
width: data.offsetWidth + "px"
|
|
172
|
-
}
|
|
273
|
+
"style": sliderAnimationStyle.value
|
|
173
274
|
}, null)]);
|
|
174
275
|
};
|
|
175
276
|
}
|
|
176
277
|
});
|
|
278
|
+
const ns = useNamespace("tabs");
|
|
279
|
+
function useTabsEvent(ctx) {
|
|
280
|
+
const onUpdateModelValue = (value) => {
|
|
281
|
+
ctx.emit("update:modelValue", value);
|
|
282
|
+
};
|
|
283
|
+
const onActiveTabChange = (value) => {
|
|
284
|
+
ctx.emit("active-tab-change", value);
|
|
285
|
+
};
|
|
286
|
+
const onTabRemove = (item, ev) => {
|
|
287
|
+
ctx.emit("tab-remove", item, ev);
|
|
288
|
+
};
|
|
289
|
+
const onTabAdd = () => {
|
|
290
|
+
ctx.emit("tab-add");
|
|
291
|
+
};
|
|
292
|
+
const onTabChange = (id, type) => {
|
|
293
|
+
ctx.emit("tab-change", id, type);
|
|
294
|
+
};
|
|
295
|
+
return { onUpdateModelValue, onActiveTabChange, onTabRemove, onTabAdd, onTabChange };
|
|
296
|
+
}
|
|
297
|
+
function useTabsRender(props) {
|
|
298
|
+
const tabsClasses = computed(() => ({
|
|
299
|
+
[ns.b()]: true,
|
|
300
|
+
[ns.m(props.tabPosition)]: true
|
|
301
|
+
}));
|
|
302
|
+
return { tabsClasses };
|
|
303
|
+
}
|
|
177
304
|
var Tabs = defineComponent({
|
|
178
305
|
name: "DTabs",
|
|
179
306
|
props: tabsProps,
|
|
180
|
-
emits: ["update:modelValue", "active-tab-change"],
|
|
181
|
-
setup(props, {
|
|
182
|
-
emit,
|
|
183
|
-
slots
|
|
184
|
-
}) {
|
|
185
|
-
const ns2 = useNamespace("tabs");
|
|
307
|
+
emits: ["update:modelValue", "active-tab-change", "tab-remove", "tab-add", "tab-change"],
|
|
308
|
+
setup(props, ctx) {
|
|
186
309
|
const state = reactive({
|
|
187
310
|
data: [],
|
|
188
311
|
active: props.modelValue,
|
|
@@ -192,20 +315,33 @@ var Tabs = defineComponent({
|
|
|
192
315
|
provide("tabs", {
|
|
193
316
|
state
|
|
194
317
|
});
|
|
195
|
-
const
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
318
|
+
const {
|
|
319
|
+
onUpdateModelValue,
|
|
320
|
+
onActiveTabChange,
|
|
321
|
+
onTabRemove,
|
|
322
|
+
onTabAdd,
|
|
323
|
+
onTabChange
|
|
324
|
+
} = useTabsEvent(ctx);
|
|
325
|
+
const {
|
|
326
|
+
tabsClasses
|
|
327
|
+
} = useTabsRender(props);
|
|
328
|
+
watch(() => state.active, () => {
|
|
329
|
+
onUpdateModelValue(state.active);
|
|
330
|
+
});
|
|
201
331
|
return () => {
|
|
202
|
-
var _a;
|
|
332
|
+
var _a, _b;
|
|
333
|
+
const tabNav2 = createVNode(TabNav, mergeProps(props, {
|
|
334
|
+
"onActiveTabChange": onActiveTabChange,
|
|
335
|
+
"onTabRemove": onTabRemove,
|
|
336
|
+
"onTabAdd": onTabAdd,
|
|
337
|
+
"onTabChange": onTabChange
|
|
338
|
+
}), null);
|
|
339
|
+
const content = (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
|
|
203
340
|
return createVNode("div", {
|
|
204
|
-
"class":
|
|
205
|
-
}, [
|
|
206
|
-
"
|
|
207
|
-
|
|
208
|
-
}), null), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
|
341
|
+
"class": tabsClasses.value
|
|
342
|
+
}, [props.tabPosition === "bottom" ? [content, tabNav2] : [tabNav2, content], createVNode("div", {
|
|
343
|
+
"style": "clear: both"
|
|
344
|
+
}, null)]);
|
|
209
345
|
};
|
|
210
346
|
}
|
|
211
347
|
});
|
|
@@ -221,6 +357,10 @@ const tabProps = {
|
|
|
221
357
|
disabled: {
|
|
222
358
|
type: Boolean,
|
|
223
359
|
default: false
|
|
360
|
+
},
|
|
361
|
+
closeable: {
|
|
362
|
+
type: Boolean,
|
|
363
|
+
default: false
|
|
224
364
|
}
|
|
225
365
|
};
|
|
226
366
|
var tab = "";
|
|
@@ -230,20 +370,27 @@ var Tab = defineComponent({
|
|
|
230
370
|
setup(props, {
|
|
231
371
|
slots
|
|
232
372
|
}) {
|
|
373
|
+
var _a;
|
|
233
374
|
const tabs2 = inject("tabs");
|
|
234
|
-
tabs2.state.slots.push(slots.title);
|
|
235
|
-
tabs2.state.data.push(props);
|
|
375
|
+
tabs2 == null ? void 0 : tabs2.state.slots.push(slots.title);
|
|
376
|
+
(_a = tabs2 == null ? void 0 : tabs2.state.data) == null ? void 0 : _a.push(props);
|
|
236
377
|
const ns2 = useNamespace("tab");
|
|
378
|
+
onUnmounted(() => {
|
|
379
|
+
var _a2;
|
|
380
|
+
if (tabs2) {
|
|
381
|
+
tabs2.state.data = (_a2 = tabs2.state.data) == null ? void 0 : _a2.filter((tab2) => tab2.id !== props.id);
|
|
382
|
+
}
|
|
383
|
+
});
|
|
237
384
|
return () => {
|
|
238
|
-
var
|
|
385
|
+
var _a2;
|
|
239
386
|
const {
|
|
240
387
|
id
|
|
241
388
|
} = props;
|
|
242
|
-
const content = tabs2.state.showContent && tabs2.state.active === id ? createVNode("div", {
|
|
389
|
+
const content = (tabs2 == null ? void 0 : tabs2.state.showContent) && tabs2.state.active === id ? createVNode("div", {
|
|
243
390
|
"class": ns2.e("content")
|
|
244
391
|
}, [createVNode("div", {
|
|
245
392
|
"role": "tabpanel"
|
|
246
|
-
}, [(
|
|
393
|
+
}, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])]) : null;
|
|
247
394
|
return content;
|
|
248
395
|
};
|
|
249
396
|
}
|
|
@@ -251,7 +398,7 @@ var Tab = defineComponent({
|
|
|
251
398
|
var index = {
|
|
252
399
|
title: "Tabs \u9009\u9879\u5361",
|
|
253
400
|
category: "\u5BFC\u822A",
|
|
254
|
-
status: "
|
|
401
|
+
status: "100%",
|
|
255
402
|
install(app) {
|
|
256
403
|
app.component(Tabs.name, Tabs);
|
|
257
404
|
app.component(Tab.name, Tab);
|